Question

我正在尝试播放1代码的音频，但只播放第一个音频。

<audio autoplay>
  <source src="../Audio/kabalyo.wav" type="audio/wav">
  <source src="../Audio/ubing.wav" type="audio/wav">
  <source src="../Audio/lalaki.wav" type="audio/wav">
  <source src="../Audio/babai.wav" type="audio/wav">
  <source src="../Audio/tokininyo.wav" type="audio/wav">
</audio>

Answer 1

基本上，浏览器会选择它可以支持的第一种类型。同样重要的是要知道不仅需要在源元素上具有type属性，而且应该从具有适当内容类型标题的服务器发送文件本身。要播放很多歌曲你必须使用这段代码，唯一的问题是它只能播放MP3。

首先，您必须将此代码放在<body>

之前

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
var audio;var playlist;var tracks;var current;initaudio();function initaudio(){current=0;audio=$('audio');playlist=$('#playlist');tracks=playlist.find('li a');len=tracks.length-1;audio[0].volume=1;playlist.find('a').click(function(e){e.preventDefault();link=$(this);current=link.parent().index();runaudio(link,audio[0])});audio[0].addEventListener('ended',function(e){current++;if(current>len){current=0;link=playlist.find('a')[0]}else{link=playlist.find('a')[current]}runaudio($(link),audio[0])})}function runaudio(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().removeClass('active');audio[0].load();audio[0].play()}
//]]>
</script>

进入.css

#player {
width: 400px;
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#player {
background: url(//lh3.googleusercontent.com/-9dx_GmP6Yeg/U06qBO9M4EI/AAAAAAAAFEY/FXrhlltF7xc/s300/bg.png);
padding: 10px 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
audio {
width:300px;
margin:0 auto;
display: inline-block
}
#player:after {
content: url(//lh3.googleusercontent.com/-KoD5KVOAsGQ/U1B_dWFttoI/AAAAAAAAFFc/uJ3SjLPlDHQ/s75/equalizador.gif);
padding-left: 10px;
}
#playlist {
margin: 0 auto 20px auto;
display: block;
background: #424242; 
border-top: 5px solid #9F111B;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
font-size: 12px; 
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#playlist li, #playlist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#playlist li a {
color: #CCC; 
background: #222; 
padding: 7px 5px;
display: block;
padding-left: 10px;
text-decoration: none;
}
#playlist li a:hover{
background: #9F111B; 
text-decoration: none;
}
#playlist .active a {
color: #B11623; 
font-style: italic;
text-decoration: none;
}
#playlist .active a:before {
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #222;

并将此代码添加到HTML：

<div id='player'>
<audio controls='' id='audio' preload='auto' tabindex='0' type='audio/mpeg'>
<source src='URL first song' type='audio/mp3'/>
</audio>
</div>
<ul id='playlist'>
<li class='active'><a href='URL first song'>Name first song</a></li>
<li><a href='URL sencond song'>Name second song</a></li>
<li><a href='URL third song'>Name third song</a></li>
</ul>

自动播放所有音频HTML

1 个答案: