JS：音乐锚的拖动与播放演示

马黑黑 · 发表于 2022-2-10 12:47

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-2-10 12:49

一楼，把任意一首音乐拖拽到 audio 播放界面，audio就会播放该音乐。

代码还没有细细推敲，只是粗略实现了功能。分享如下：

<style type="text/css">

#auplayer { width:300px; }
#ypurl { padding: 10px; }
#ypurl a { text-decoration:none;cursor:pointer; }

</style>

<audio id="auplayer" controls="controls" ondragover="allowDrop(event)" ondrop="drop(event)"></audio>
<div id="ypurl"></div>

<script type="text/javascript">

var arMu = [
["https://www.80wp.com/wj/3010593/a6946233afcfb21487e1a62e90ea8fec.mp3","听闻远方有你"],
["http://www.kumeiwp.com/sub/filestores/2021/03/01/a7f6cef7d30eff58dd2d1969b525364a.mp3","四季予你"],
["http://www.kumeiwp.com/sub/filestores/2022/02/10/d4ad1996597f3557dae4be6dd1d2ffd1.mp3","Epica"],
["http://www.kumeiwp.com/sub/filestores/2021/09/20/24100ae0522d3546612116e04ae8da00.mp3","一百万个可能"]
];
var ypurl = document.getElementById("ypurl");
var str = "";

for(i=0; i<arMu.length; i++){
str += "<a id='yp" + i +"' href='" + arMu[i][0] + "' ondragstart='drag(event)' >" + arMu[i][1] + "</a><br />";
}
ypurl.innerHTML = str;

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

function drag(obj) { obj.dataTransfer.setData("text/plain",obj.target.id); }

function drop(obj) {
var aud = document.getElementById("auplayer");
var evid = obj.dataTransfer.getData("text/plain",obj.target.id);
aud.src=document.getElementById(evid);
aud.play();
}
</script>

马黑黑 · 发表于 2022-2-10 12:53

实现原理：

首先，链接默认支持拖动，<a>...>/a>标签无需设置 draggable 属性。

其次，audio标签要通过两个自定义JS函数达成两个功能，一是能够接受拖拽过来的数据，二是能够识别放下来的数据。这里面用到 dataTransfer 方法，具体吃完午饭再补充说明。

马黑黑 · 发表于 2022-2-10 14:35

本帖最后由马黑黑于 2022-2-10 14:40 编辑

关于 dataTransfer 方法

dataTransfer方法可以用来处理被拖动对象的数据：

dataTransfer.setData - 设置传送的数据
dataTransfer.getData - 设置接收的数据

传送与接收都需要两个参数：

dataTransfer.setData(参数1, 参数2)
dataTransfer.getData(参数1, 参数2)

参数1 主要是彼此间传输的标识，理论上可以随意命名，示例中我们使用了标准的表达法；参数2是元素标识，比如元素的 id ，实例中使用的是js内置的元素id关键字 xx.target.id：

xx.dataTransfer.s/getData("text/plain",obj.target.id)

再次解释：上面代码，红色部分可随意命名，保持前后一致即可（就是setData和getData的参数1要相同）；蓝色部分，只能这样，不能改动，它取对象元素的id而不论这个元素的id是什么只要有就行。

显然，dataTransfer方法是一楼示例所能达成拖拽播放的关键：数据的传输（setData）与数据的接收（getData），这是核心。要完成这些，核心支持了，还需一些细节支持：

① audio 标签通过 ondragover 的JS事件准许被拖放元素经过时显示为可以放下（仔细观察拖动动作的图标就能觉察细小的变化和函数的作用），所以HTML标签语句里有这一句，allowDrop() 是我们的自定义函数，它在调用时参数只能用 event ；

② audio 标签通过 ondrop 的JS事件处理元素被放下后的一系列动作，由函数 ondrop()完成，语句放在audio标签里，ondrop="drop(event)"，drop()是我们的自定义函数，它在调用时候参数只能用 event ；

③HTML的锚，即<a ...> ... </a>的标签，必须有 id 标识符，例如，<a id="abc" href="...">...</a>，id 名称可随意，只要不与其他任意一个id雷同；

④ HTML锚标签里，必须调用调用了 dataTransfer.setData 的自定义函数 drag(obj) ，例如：<a id="abc" ondragstart='drag(event)' href="..." >...</a>，只有类似于这样的锚拖到 audio 时才会被正确识别为URI地址。