我试图弄清楚如何一次播放一个音频文件。我有多个音频属性,我将通过javascript和html5动态创建。例如,我将一个音频文件拖放到一个div上它将播放,但我希望能够将另一个音频文件拖放到另一个div上并停止音频文件,以便播放一个音频属性。我的代码片段在下面,我可以提供一个JSFiddle,如果需要也谢谢!!
<div id="target_container">
<div id="drop_target0" class="audio_box">Drop Media Files Here</div>
<div id="drop_target1" class="audio_box">Drop Media Files Here</div>
</div>
function handleEvent(event){
switch(event.type){
case "drop":
case "dragdrop":
if(this.id === "drop_target0"){
divTarget("drop_target0","File Drop Successfully");
var song0 = document.createElement("audio");
song0.setAttribute('src',document.getElementById("drop_target0").src= event.dataTransfer.getData('url') );
song0.autoplay = true;
if(this.id === "drop_target1"){
divTarget("drop_target1","File Drop Successfully");
var song = document.createElement("audio");
song.setAttribute('src',document.getElementById("drop_target1").src= event.dataTransfer.getData('url') );
song.autoplay = true;
}
// Checks to see if div 0 is playing
if(!document.getElementById("drop_target0).paused){
alert("Cant play multiple files at once");
document.getElementById("drop_target1).pause()
}
// Checks to see if div 1 is playing
if(!document.getElementById("drop_target1).paused){
alert("Cant play multiple files at once");
document.getElementById("drop_target0).pause()
}
}
}
EventUtil.addHandler(document.getElementById("drop_target0"),"drop", handleEvent);
EventUtil.addHandler(document.getElementById("drop_target1"),"dragdrop", handleEvent);