怎么可以点击audio播放相应的音频列表， 而互不影响呢
html代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>支持iOS安卓html5播放器代码</title>
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="styles.css" media="all" >
</head>
<body>
<div id="myAudio">
<audio>
<source title="正房" src="1.mp3" />
<source title="厨房" src="2.mp3" />
</audio>
<div class="play_controls">
<a class="btn_previous" style="display:none;">e</a>
<a class="btn_play">c</a>
<a class="btn_next" style="display:none;">d</a>
</div>
</div>
<div id="myAudio">
<audio>
<source title="正房" src="1.mp3" />
<source title="厨房" src="2.mp3" />
</audio>
<div class="play_controls">
<a class="btn_previous" style="display:none;">e</a>
<a class="btn_play">c</a>
<a class="btn_next" style="display:none;">d</a>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/AudioPlayer.js"></script>
<script type="text/javascript">
$(function(){
$("#myAudio").initAudio();
});
</script>
</body>
</html>
js代码
(function($){
jQuery.fn.extend({
"initAudio" : function(){
var myAudio = $("audio",this)[0];
var $sourceList = $("source",this);
var currentSrcIndex = 0;
var currentSr = "";
/*播放、暂停、上一首、下一首功能实现*/
$(".btn_play").click(function(){
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
});
$(".btn_next").click(function(){
++currentSrcIndex > $sourceList.length - 1 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});
$(".btn_previous").click(function(){
--currentSrcIndex < 0 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});
/*audio元素事件绑定*/
$(myAudio).bind("play",function(){
$(".btn_play").text("h");
});
$(myAudio).bind("pause",function(){
$(".btn_play").text("c");
});
$(myAudio).bind("ended",function(){
$(".btn_next").triggerHandler("click");
});
}
});
})(jQuery)
css代码
/*使用font-face来制作播放按钮的图标*/
#myAudio .play_controls a {
font-family: "icomoon";
cursor: pointer;
font-size:12px;
color:#CCC;
}
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
}
