以特定顺序拖动音频文件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
答
忽略此行
ev.target.appendChild(document.getElementById(data));
并用以下替换:
this.src = document.getElementById(data).src;
这工作,因为你是使用音频播放器作为有效的放置目标。因此,使用拖动元素的id
,我们可以从中请求src
并将其设置为drop
事件中的元素。
+0
它没有工作。但多数民众赞成正是我想要做.. – yogas
它的工作就像魔术..谢谢你 – yogas