全部播放音频HTML

嗨我想播放音频1 1这个代码，但唯一的第一个音频播放。全部播放音频HTML

<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>

来源

2016-01-13 Mark Klein Fermin

你可以做出的jsfiddle :)我们更容易修改你的代码:) –

基本上，浏览器会选择它可以支持的第一种类型。知道不仅需要在源元素上具有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>

来源

2016-01-13 17:05:15

全部播放音频HTML

回答

相关问题