javascript - ドラッグドロップで一度に1つのオーディオファイルを再生する方法javascript html5

Question

一度に 1 つのオーディオ ファイルを再生する方法を見つけようとしています。JavaScript と html5 を介して動的に作成するオーディオ属性が複数あります。たとえば、オーディオ ファイルを 1 つの div にドラッグ アンド ドロップすると再生されますが、別のオーディオ ファイルを別の div にドラッグ アンド ドロップしてオーディオ ファイルを停止し、1 つのオーディオ アトリビュートが再生されるようにしたいと考えています。私のコードのスニペットを以下に示します。必要に応じて 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);