javascript - 如何使用拖放javascript html5一次播放一个音频文件

Question

我试图弄清楚如何一次播放一个音频文件。我有多个音频属性，我将通过 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);