每次按Play键时播放不同的音频

Play a different audio each time play is pressed

本文关键字：音频 播放 Play      更新时间：2023-09-26

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

    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/

您不需要一直重新创建<audio>元素。没必要。

查看以下mdn页面，了解元素的信息。

您也不需要加载文件。当您将该文件设置为<audio>元素的src时，该文件将自动加载。

媒体资源位置

如果使用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>

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

你可以这样做:

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

你必须使用结束事件捕获来更改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);
        }
    });
相关文章：