以特定順序拖動音頻文件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拖放以下音頻標籤進入前

來源

2017-08-15 yogas

在拖放函數中，正如@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

來源

2017-08-15 16:50:06 Frankusky

它的工作就像魔術..謝謝你 – yogas

忽略此行

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

並用以下替換：

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

這工作，因爲你是使用音頻播放器作爲有效的放置目標。因此，使用拖動元素的id，我們可以從中請求src並將其設置爲drop事件中的元素。

來源

2017-08-15 15:08:35 Mouser

它沒有工作。但多數民衆贊成正是我想要做.. – yogas

以特定順序拖動音頻文件html5

回答

相關問題