我的音乐文件有四个损坏的部分。 我想拖放音乐文件，以便文件按给定顺序播放。这个想法是用户必须按正确的顺序拖动音频文件。 我可以拖放音乐文件，但不明白如何将源设置为拖动音频的 src。
这是代码:
<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>
目前看起来是这样的。我可以将下面的音频标签拖放到顶部
最佳答案
在你的 drop 函数中，正如 @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
关于javascript - 按特定顺序拖动音频文件 html5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45695568/