思路是,每次點(diǎn)擊不同按鈕蘑辑,創(chuàng)建一個(gè)audio標(biāo)簽洋机,并且給出src值,并且播放
1洋魂、首先準(zhǔn)備一個(gè)放audio標(biāo)簽的容器
<div class="audiopalyer"></div>
2绷旗、然后準(zhǔn)備兩個(gè)按鈕,或者什么副砍,我這里是div
<div class="clickitem" audio="1.mp3">111</div>
<div class="clickitem" audio="2.mp3">222</div>
3衔肢、然后用jquery控制,當(dāng)然別忘了引入jquery,按照這個(gè)思路也可以用原生寫(xiě)哦
$(".clickitem").click(function(){
//首先置空容器豁翎,因?yàn)槌说谝淮吸c(diǎn)擊總是有audio標(biāo)簽的
$(".audiopalyer").html("")
//來(lái)一個(gè)audio內(nèi)容角骤,看好這里已經(jīng)給src賦值了
var aud = $('<audio id="player" src="' + $(this).attr("audio") + '" hidden></audio>')
//放到容器里區(qū)
$(".audiopalyer").html(aud)
//獲取當(dāng)前audio
var audio = $("#player")[0];
//局部load()一下
aud.load();
audio.play();
});
當(dāng)然也可以直接默認(rèn)播放,
$(".clickitem").click(function(){
//首先置空容器,因?yàn)槌说谝淮吸c(diǎn)擊總是有audio標(biāo)簽的
$(".audiopalyer").html("")
//來(lái)一個(gè)audio內(nèi)容邦尊,看好這里已經(jīng)給src賦值了
var aud = $('<audio id="player" src="' + $(this).attr("audio") + '" autoplay hidden></audio>')
//放到容器里區(qū)
$(".audiopalyer").html(aud)
});