5

ボタンをクリックしてサウンドを再生できる小さなhtml5アプリケーションがあります。

IDが「再生中」の<audio>タグをに追加する機能があります。<div>それが完了すると、音はそれ自体を取り除きます。

function sound(track){
$("#playing").append("<audio src=\"" + track + "\" autoplay onended=\"$(this).remove()\"></audio>");
}

私が持っているボタンの場合：

<button onclick="sound('sounds/tada.mp3')">Tada</button>

ボタンをクリック<audio>すると、要素インスペクターに一時的に表示され、終了すると消えますが、2回トリガーした後、少なくともChromeで動作しなくなります. コンソールにもエラーはありません。

何が起こっている？

4

2 に答える 2

1

わかりました、見てみましょう..

var audioURL = "http://soundbible.com/mp3/Canadian Geese-SoundBible.com-56609871.mp3";
var audioEl = null;

function removeAudio() {
  if (audioEl && audioEl.parentNode)
    audioEl.parentNode.removeChild(audioEl);
}

function sound() {
  removeAudio();
  audioEl = document.createElement("audio");
  audioEl.src = audioURL;
  audioEl.controls = true;
  audioEl.addEventListener("ended", removeAudio); // <-- Note it's ended, not end!
  document.getElementById("playing").appendChild(audioEl);
  audioEl.play();
}

document.getElementById("tada").addEventListener("click", sound);
<div id="playing">
  
</div>
<button id="tada">Tada</button>

このスクリプトに問題はありません。

  1. audioURL を決定し、後で使用するため audioEl を null に設定します
  2. ID を持つ要素"tada"がクリックされると、sound関数が実行されます。
    • オーディオを取り外します。
    • オーディオ要素を作成します。
    • オーディオが終了したら、オーディオを削除します。
    • ID の要素にオーディオを追加します"playing"。
    • オーディオを再生します。

注意すべきことの 1 つは、endedイベントではなくイベントを使用することendです。

(この回答は、Andrew が本当に私たちに回答してほしいと思っているため、ここにあります。)

于 2015-10-24T09:00:38.407 に答える
1

HTML で onclick/onend を取り除き、js でボタンを参照します。

HTML

<button id='tada' sound_url='sounds/tada.mp3'>Tada</button>

そして、JS

var sound = function(track){
   $("#playing").append("<audio id='played_audio' src='\" + track + \"' autoplay='true'></audio>");
}

$('#tada').on('click', function () {
   var sound_url = $(this).attr('sound_url');
   sound(sound_url);
});

$('#playing').on('end', 'played_audio', function() {
   $(this).remove();
});
于 2012-10-14T17:21:35.427 に答える