javascriptによるオーディオバッファリング処理中にテキストを「読み込み」に置き換えますか？

Question

私はjavascriptでオールインワンの再生/一時停止ボタンを作成しようとしています。 clickイベントではなくaud_play_pauseの条件によって決定されます。理想的には、正しいクラス/テキストに切り替えることができます（audio.play - >アイコン「一時停止」 - >テキスト「一時停止」/ audio.paused->アイコン「再生」 - >テキスト「再生」オーディオ。バッファリング - >テキスト "自動再生機能（まあまあ）には影響しません。 JavaScriptのバッファリング処理中にテキストが "読み込み中"表示される可能性はありますか？

私の貧弱なコーディングスキルを言い訳して、あなたのページにjQueryのを含めると期待どおりにコードが動作ここjsfinddle link

var audio = new Audio(), 
u = 0; 
var playlist = new Array('http://www.w3schools.com/htmL/horse.mp3', 'http://sifidesign.com/audio/explosion.mp3'); 

audio.addEventListener('ended', function() { 
u = ++u < playlist.length ? u : 0; 
console.log(u) 
audio.src = playlist[u]; 
audio.play(); 
}, true); 


function aud_play_pause() { 
if (audio.paused) { 
audio.play(); 
$('#play span').text('Pause'); 
$('#play').removeClass('play').addClass('pause'); 

} 
else { 
audio.pause(); 
$('#play span').text('Play'); 
$('#play').removeClass('pause').addClass('play'); 
} 
} 

document.querySelector('#play').addEventListener('click', aud_play_pause) 

audio.volume = 0.5; 
audio.loop = false; 
audio.src = playlist[0]; 

Answer 1

から完全なコードを見つけてください。

多くの場合、$()を使用してJavaScriptコードが表示されます。あなたのフィドルで複数回$ = jQueryない以上とjQueryはDOMを照会などの一般的なJSのタスクを簡素化するJavaScriptライブラリで、イベントを追加/削除など

var audio = new Audio(), 
 
    u = 0; 
 
var playlist = new Array('http://www.w3schools.com/htmL/horse.mp3', 'http://sifidesign.com/audio/explosion.mp3'); 
 

 
audio.addEventListener('ended', function() { 
 
    u = ++u < playlist.length ? u : 0; 
 
    console.log(u) 
 
    audio.src = playlist[u]; 
 
    audio.play(); 
 
}, true); 
 

 

 
function aud_play_pause() { 
 
    if (audio.paused) { 
 
    audio.play(); 
 
    $('#play span').text('Pause'); 
 
    $('#play').removeClass('play').addClass('pause'); 
 

 
    } else { 
 
    audio.pause(); 
 
    $('#play span').text('Play'); 
 
    $('#play').removeClass('pause').addClass('play'); 
 
    } 
 
} 
 

 
document.querySelector('#play').addEventListener('click', aud_play_pause) 
 

 
audio.volume = 0.5; 
 
audio.loop = false; 
 
audio.src = playlist[0];

a.button3 { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important; 
 
    font-size: 12px; 
 
    font-weight: bolder; 
 
    color: white; 
 
    background: rgba(0, 0, 0, 0.376) none repeat scroll 0 0; 
 
    border: 1px solid rgba(0, 0, 0, 0.2); 
 
    border-radius: 2px; 
 
    color: #ffffff; 
 
    cursor: pointer; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important; 
 
    font-style: normal; 
 
    font-weight: 700; 
 
    height: 11px; 
 
    letter-spacing: 0; 
 
    line-height: 90%; 
 
    padding: 4px 5px 3px; 
 
    position: fixed; 
 
    left: 197px; 
 
    text-decoration: none; 
 
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15); 
 
    top: 2px; 
 
    z-index: 5000; 
 
} 
 
a.button3:hover { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important; 
 
    font-size: 12px; 
 
    font-weight: bolder; 
 
    color: white; 
 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.34); 
 
} 
 
a.button3.icon { 
 
    padding-left: 2px; 
 
} 
 
a.button3.icon span { 
 
    padding-left: 20px; 
 
    background: url('http://static.tumblr.com/g7ueics/Mhfojxle8/vert-sprites2.png') no-repeat; 
 
    width: 15px; 
 
    height: 15px; 
 
} 
 
a.button3.play span { 
 
    background-position: -5px -5px; 
 
} 
 
a.button3.pause span { 
 
    background-position: -5px -61px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="button3 icon play" id="play" href="#"><span>Play</span></a>