HTML 5音频标记多个文件

Question

我试图在一个HTML 5音频标签中有两个文件一个接一个播放.我到目前为止的代码是:

<audio id="ListenLive" controls autoplay>
<source src="advert.mp3" type="audio/mpeg">
<source src="stream.mp3" type="audio/mpeg">

</audio>

我目前遇到的问题是只有第一个文件会播放和结束,就像没有第二个文件一样.第一首歌结束后,它就什么也没做.

当第一首曲目结束时,有没有办法让第二首曲目自动播放？我需要它在HTML中,因为它适用于移动网站,因此某些代码可能无法在某些设备上运行

Answer 1

向标记添加多个源不会以这种方式工作.您可以使用它以多种格式提供源.(某些浏览器不支持mp3 - 即Firefox不支持mp3,您应该提供ogg文件)

样品:

<audio>
   <source src="" id="oggSource" type="audio/ogg" />
   <source src="" id="mp3Source" type="audio/mpeg" />
   Your browser does not support the audio element.
</audio>

你的情况不同.您正在尝试制作播放列表.您可以自己制作播放列表:

http://www.lastrose.com/html5-audio-video-playlist/

http://jonhall.info/how_to/create_a_playlist_for_html5_audio

或者只是使用第三方插件,如:

http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/

使用jPlayer也可以解决浏览器兼容性问题.例如,如果您只提供.mp3格式,当用户使用Firefox浏览时,它将切换到Flash版本.

Answer 2

在javascript中你可以这样做(这只是为了让你开始):

audio = new Audio("start url");

  audio.addEventListener('ended',function(){
        audio.src = "new url";
        audio.pause();
        audio.load();
        audio.play();
    });

如果你想要你也可以使用相同的播放器(jquery):

var audio = $("#player");