以特定顺序拖动音频文件html5

问题描述：

我有四个音乐文件的损坏部分。我想要拖放音乐文件，以便文件以播放顺序播放。这个想法是用户必须以正确的顺序拖动音频文件。我可以拖放音乐文件，但不知道如何设置拖动音频的src源。以特定顺序拖动音频文件html5

下面是代码：

<script> 

$(document).ready(function(){ 

    $("#gif").hide(); 

    $("#play").click(function(){ 
     $("#span1").hide(); 
     $("#span2").hide(); 
     $("#span3").hide(); 
     $("#span4").hide(); 
     $("#gif").show(); 
     var one = document.getElementById("one"); 
     var two = document.getElementById("two"); 
     var three = document.getElementById("three"); 
     var four = document.getElementById("four"); 

     one.addEventListener("ended", function() { 
      two.play(); 
      }); 
     two.addEventListener("ended", function() { 
      three.play(); 
      }); 
     three.addEventListener("ended", function() { 
      four.play(); 
      }); 
     one.play(); 
    }); 
}); 
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<script> 
    function allowDrop(ev) { 
     ev.preventDefault(); 
    } 

    function drag(ev) { 
     ev.dataTransfer.setData("text", ev.target.id); 
    } 

    function drop(ev) { 
     ev.preventDefault(); 
     var data = ev.dataTransfer.getData("text"); 
     ev.target.appendChild(document.getElementById(data)); 
     console.log(ev); 
    } 
</script> 
</head> 
<body> 



    <audio controls id="span1" class="bg-info" ondrop="drop(event)" ondragover="allowDrop(event)"> </audio> 
    <audio controls id="span2" class="bg-info" ondrop="drop(event)" ondragover="allowDrop(event)"> </audio> 
    <audio controls id="span3" class="bg-info" ondrop="drop(event)" ondragover="allowDrop(event)"> </audio> 
    <audio controls id="span4" class="bg-info" ondrop="drop(event)" ondragover="allowDrop(event)"> </audio> 

    <button id="play">Play</button> 
    <br> 

     <audio draggable="true" ondragstart="drag(event)" id="one" controls> 
     <source src="PoetsOne.mp3"type="audio/ogg"> 
      </audio> 
    <br> 

     <audio draggable="true" ondragstart="drag(event)" id="two" controls> <source src="PoetsTwo.mp3" 
      type="audio/ogg"> </audio> 
    <br> 

     <audio draggable="true" ondragstart="drag(event)" id="three" controls> <source src="PoetsThree.mp3" 
      type="audio/ogg"> </audio> 
    <br> 

     <audio draggable="true" ondragstart="drag(event)" id="four" controls> <source src="PoetsFour.mp3" 
      type="audio/ogg"></audio> 
    <br> 

    <input type="button" value="Play Again" 
     onClick="window.location.reload()"> 
    <img id="gif" alt="playing" src="sam.gif" /> 

</body>

它目前看起来是这样的。我CA拖放以下音频标签进入前

答

在拖放函数中，正如@Mouser所说的，获取源元素的路径。实际上你的数据变量只包含音频元素的id，所以你必须去源元素，因为有你需要的src属性。所以，你的功能将是：

function drop(ev) {    
    ev.preventDefault();    
    var data = ev.dataTransfer.getData("text");    
    ev.target.src = document.getElementById(data).getElementsByTagName("source")[0].src; 
}

关于这个坏事是，如果你有多个源元素（跨浏览保持兼容），你会传递错误的源URL，因为元素位置是固定的。我建议你看看this answer

它的工作就像魔术..谢谢你 – yogas

答

忽略此行

ev.target.appendChild(document.getElementById(data));

并用以下替换：

this.src = document.getElementById(data).src;

这工作，因为你是使用音频播放器作为有效的放置目标。因此，使用拖动元素的id，我们可以从中请求src并将其设置为drop事件中的元素。

它没有工作。但多数民众赞成正是我想要做.. – yogas

以特定顺序拖动音频文件html5

相关推荐