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

时间:2013-07-18 17:54:26

标签: javascript html5 audio

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

0 个答案:

没有答案