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);
    }

我做错了什么？谢谢！

这是一个小提琴： http://jsfiddle.net/gD4Dr/1412/

Answer 1

你可以这样做：

 $(document).ready(function() {
            var audioElement = document.createElement('audio');
            audioElement.setAttribute('src', 'http://www.w3schools.com/html/horse.ogg');
            $.get();
            audioElement.addEventListener("load", function() {
                audioElement.play();
            }, true);

            $('.play').click(function() {
                audioElement.play();
                audioElement = update(audioElement);
            });

        function update(audioElement) {
            audioElement.remove();
            var audioElement = document.createElement('audio');
            audioElement.setAttribute('src', 'http://www.uscis.gov/files/nativedocuments/Track%2093.mp3');
            return audioElement;    
        }

    });

Answer 2

您无需一直重新创建<audio>元素。这不是必要的。

在<audio>元素上查看以下mdn页面的信息。

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

Location of the media resource

如果使用src属性创建媒体元素，则用户代理必须立即调用媒体元素的资源选择算法。

如果设置或更改了媒体元素的src属性，则用户代理必须调用媒体元素的媒体元素加载算法。（即使存在源元素，删除src属性也不会这样做。）

以下是您可以做的一个示例。只需查看评论，我相信你会明白这一点。

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>媒体元素时找到有关正在发送的事件的信息。

Answer 3

你必须使用结束事件捕获来更改src url

audioElement.addEventListener("ended")



  $(document).ready(function() {
            var audioElement = document.createElement('audio');
            audioElement.setAttribute('src', 'http://www.w3schools.com/html/horse.ogg');
            $.get();
            audioElement.addEventListener("load", function() {
                audioElement.play();
            }, true);
    audioElement.addEventListener("ended", function() {
        audioElement.setAttribute('src', 'http://www.w3schools.com/html/horse.ogg');
                audioElement.play();
            }, true);
            $('.play').click(function() {
                audioElement.play();

            });

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

    });

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

3 个答案: