audio标签可实现音频播放。为了ui更好看,自定义了图片,点击实现音频的播放和停止。代码如下
//部分html
<div class="mui-col-sm-4">
<div class="tj_img">
<button class="m1 " onclick="playPause(6);" id="mc_play6">
<audio loop="loop" id="ad6" >
<source src="fonts/test.mp3" type="audio/mp3"></source>
</audio>
<img src="img/zheng1.jpg"/>
</button>
<p>十面埋伏</p>
</div>
//js
<script>
function playPause(str){
var str1="ad"+str;
var myAud = document.getElementById(str1);
var myad1 = document.getElementById("ad1");
var myad2 = document.getElementById("ad2");
var myad3 = document.getElementById("ad3");
var myad4 = document.getElementById("ad4");
var myad5 = document.getElementById("ad5");
var myad6 = document.getElementById("ad6");
if(myad1!=myAud){
myad1.pause();
}
if(myad2!=myAud){
myad2.pause();
}
if(myad3!=myAud){
myad3.pause();
}
if(myad4!=myAud){
myad4.pause();
}
if(myad5!=myAud){
myad5.pause();
}
if(myad6!=myAud){
myad6.pause();
}
if(myAud.paused){
myAud.play();
}else{
myAud.pause();
}
}
</script>
为了使音频之间不混合播放,采用了js进行逻辑控制(不想费脑子,所以用了简单粗暴的逐一判断 cry)。其中涉及了js函数传参,js中字符串比较等。
mui框架