怎么可以点击audio播放相应的音频列表, 而互不影响呢

weiweilee 发布于 2016/04/11 16:56
阅读 519
收藏 0
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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');
}
加载中
返回顶部
顶部