js直接获取对象方法
<audio id="audio" src="no.mp3"></audio>
<script type="text/javascript">
var audioEle = document.getElementById("audio");
audioEle.play(); //播放
audioEle.pause(); //暂停
</script>
jquery获取对象法
<audio id="audio" src="no.mp3"></audio>
<script type="text/javascript">
var audioEle = $("#audio")[0];
audioEle.play(); //播放
audioEle.pause(); //暂停
</script>
jquery为什么需要一个0呢?js操作获得的是audio对象,jquery选择器获得的是jquery对象,0对象的才是对应的节点对象。所以不能直接使用jquery对象去操作,这一点需要详细补充一下基础知识。
示例操作:
HTML:
<p class="musicbtn">点击关闭音乐</p>
<audio id="mp3bf" autoplay loop src="music.mp3" type="audio/mpeg"></audio>
JS:
var myVid = $("#mp3bf")[0];
$('p.musicbtn').click(function(){
//防止冒泡 //event.stopPropagation();
if(myVid.paused) //如果当前是暂停状态
{
$('.musicbtn').text("点击关闭音乐");
myVid.play();//播放
return;
}else{
//当前是播放状态 $('.musicbtn').text("点击播放音乐");
myVid.pause(); //暂停
}
});