思路是,每次点击不同按钮,创建一个audio标签,并且给出src值,并且播放
1、首先准备一个放audio标签的容器
<div class="audiopalyer"></div>
2、然后准备两个按钮,或者什么,我这里是div
<div class="clickitem" audio="1.mp3">111</div>
<div class="clickitem" audio="2.mp3">222</div>
3、然后用jquery控制,当然别忘了引入jquery,按照这个思路也可以用原生写哦
$(".clickitem").click(function(){
//首先置空容器,因为除了第一次点击总是有audio标签的
$(".audiopalyer").html("")
//来一个audio内容,看好这里已经给src赋值了
var aud = $('<audio id="player" src="' + $(this).attr("audio") + '" hidden></audio>')
//放到容器里区
$(".audiopalyer").html(aud)
//获取当前audio
var audio = $("#player")[0];
//局部load()一下
aud.load();
audio.play();
});
当然也可以直接默认播放,
$(".clickitem").click(function(){
//首先置空容器,因为除了第一次点击总是有audio标签的
$(".audiopalyer").html("")
//来一个audio内容,看好这里已经给src赋值了
var aud = $('<audio id="player" src="' + $(this).attr("audio") + '" autoplay hidden></audio>')
//放到容器里区
$(".audiopalyer").html(aud)
});