Question

我正在研究一个项目，该项目涉及将混合的音乐（img元素）行拖放到正确的顺序。

我需要一个按钮来播放音频文件，具体取决于已将哪个文件拖到目标区域中。

因此，如果将与audio1对应的img1拖到目标区域中，则播放音频1，但是如果将img2拖到目标区域中，则将播放audio2。

听起来很简单，但我很困惑！

到目前为止，这是我的代码：（“播放”按钮的代码仅在星期一播放audio1-这是应该触发我想要的功能的按钮）。

谢谢您的帮助：-）

<head>
    
<style>#empties  { 
width:410px;
height:700px;
margin-left:10px;
margin-top:0px;
position:absolute;
top:10px;
left: 0px; 
border:1px solid blue;
}


.box001 {
width:410px;
height:41px;
margin:0px;
padding:0px;
border:1px solid blue;
}
 
 
/* snippets  */
 
#music  {
width:410px;
height:700px;
margin-left:00px;
margin-top:0px;
position:absolute;
top:10px;
left:450px;
border: 1px solid red;

 }


.box002 {


width:410px;
height:41px;
margin:0px;
padding:0px;
border:1px solid red;

 }
 
/* play button */

#my_button  {

margin-left:00px;
margin-top:0px;
/*padding:10px;*/
/*border:1px solid black;*/
position:absolute;
top:10px;
left:880px;
border: 1px solid red;

    
}
 </style>

</head>
    
<!-- music is dropped into these empty boxes -->    
    
<div id = "empties">

  <div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="place001" ></div>

</div>

    
<!-- these are the snippets to be dragged and dropped -->

<div id = "music"> 
  
  <div class = "box002" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img onclick = "playAudio('one.mp3')" ondragstart = "drag(event)" draggable = "true" id = "target001" src="pic1.JPG" alt="" border="0">  
  </div>
  <div class = "box002" ondrop="drop(event)" ondragover="allowDrop(event)">  
      <img onclick = "playAudio('two.mp3')" ondragstart = "drag(event)" draggable = "true" id = "target002" src="pic2.JPG" alt="" border="0">
  </div>
 
</div> 
  
<!-- Audio for button-->
  
<audio id = "music1" src="one.mp3" preload="auto"></audio>
       
 <!-- Button -->   
    
<div id = "my_button">
  <button onclick = "play_music()";>Play</button>    
</div> 
    



<script type="text/javascript">


/* This function randomizes the snippets */    
    
var parent = document.getElementById("music");
for(var i = 0; i < parent.children.length; i++){
  parent.appendChild(parent.children[Math.random() * i | 0]);
}



function allowDrop(ev)  {
    ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}
    
/* this is the DROP function*/    

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
    
    
/* plays the snippets when they are clicked clicked*/    
    
function playAudio(url) {
  new Audio(url).play();
}

/*Funcn for play button */
    
    function play_music() {
        document.getElementById('music1').play();
    }
  
</script>

  </body>
</html>

如何通过拖放结束位置播放音频文件？

0 个答案: