javascript - 每次按下播放按钮时播放不同的音频

Question

我正在尝试制作一个音频按钮，每次按下时都会播放不同的声音。现在，我有播放按钮，第一个声音很好，但第一次播放后声音没有更新为第二个声音。

    function update(audioElement) {
        audioElement.remove(); //get rid of old audio obj
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'http://www.uscis.gov/files/nativedocuments/Track%2093.mp3'); //add new sound file
        $.get();
        audioElement.addEventListener("load", function() {
            audioElement.play(); //bind new sound file
        }, true);
    }

我做错了什么？谢谢!

这是一个 fiddle : http://jsfiddle.net/gD4Dr/1412/

Answer 1

您不需要重新创建 <audio>元素始终。那是没有必要的。

查看以下 mdn 页面以获取有关 <audio> 的信息元素。

您也不必加载该文件。一旦您将其设置为src，该文件就会自动加载。 <audio>的元素。

Location of the media resource

If a media element is created with a src attribute, the user agent must immediately invoke the media element's resource selection algorithm.

If a src attribute of a media element is set or changed, the user agent must invoke the media element's media element load algorithm. (Removing the src attribute does not do this, even if there are source elements present.)

以下是您可以执行的操作的示例。只需查看评论，我相信您就会明白。

var audioFiles = ["http://www.w3schools.com/html/horse.ogg",
                  "foo/bar",
                  "http://www.uscis.gov/files/nativedocuments/Track%2093.mp3"
                 ], // files to play.
    $playBtn = $('.play'), // play button.
    $audioElem = $('<audio>'); // audio element.

// append the audio element to the body, only once.
$('body').append($audioElem);

// set src attribute of audio element to the next file in the list.
function playNextAudioFile() {
  // lets get the current file index using the current src attribute value.
  var crntFile = $.inArray($audioElem.attr('src'), audioFiles);
  // if there is none or if we are at the end of the list play the first file in the list.
  if (crntFile === -1 || crntFile === audioFiles.length - 1) {
    $audioElem.attr('src', audioFiles[0]);
    // else play the next file.
  } else {
    $audioElem.attr('src', audioFiles[crntFile + 1]);
  }
}
// listen for the click event on play button.
$playBtn.on('click', playNextAudioFile);

// listen for canplay event and start playing.
$audioElem.on('canplay', function() {
  $audioElem[0].play();
});
// start playing next file if prev file has ended.
$audioElem.on('ended', function() {
  $playBtn.click();
});
// start playing next file if an error occurred.
$audioElem.on('error', function() {
  $playBtn.click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="play">Play</button>

Here您可以找到有关处理嵌入式 <audio> 时发送的事件的信息和<video>媒体元素。