测试 audio 播放器

马黑黑 发表于 2022-2-8 23:12

马黑黑 发表于 2022-2-8 23:19

本帖最后由马黑黑于 2022-2-8 23:27 编辑

原生的页面和论坛上还是有一点点区别，主要是JS被接受的程度。删了一次再发才能用。

一些细节逻辑没弄好，所以发在这里测试一下。

播放器有两种播放模式：单曲循环（默认）和多首连放。播放器可自己添加歌曲，要求MP3格式，地址正确、音乐可用，还需要填写歌名。所添加的歌曲仅在一个访问周期有效，下回再打开是不存在的。

所有代码脱网编写，错漏避免不了。敬请指点！

马黑黑 发表于 2022-2-8 23:20

本帖最后由马黑黑于 2022-2-8 23:25 编辑

代码分享：
<style type="text/css">

#waiDiv { margin:10px auto; padding:8px; width:400px; background:tan; border-radius:10px; box-shadow:2px 2px 4px #000; display:flex; flex-direction:column; position:relative; }
#audDiv { width:100%; display:flex; flex-direction:row; align-items:center; gap:8px; }
#audDiv audio { width:360px; height:30px; }
#audDiv div { margin:6px; background:#eee; text-align:center; width:30px; height:30px; line-height:30px; border-radius:50%; cursor:pointer; }
#mLiDiv { background:#eee; color:#000; min-height:100px; padding:10px; border:1px solid olive; }
#mLiDiv a { cursor:pointer; text-decoration: none; }
#prompt { position:absolute; left:200px; top:50px; width:400px; padding:6px 12px; background:silver; font-size:12px; display:none; box-shadow:1px 1px 1px #666; border-radius:2px; }
#prompt input { outline:none; }
#prompt input { margin:4px;padding:4px; width:392px; }
#prompt input { border-radius:4px; cursor:pointer;border:1px solid gray; border-radius:3px; box-shadow: 1px 1px 2px #444; }
#prompt input { cursor:pointer; }

</style>

<div id="waiDiv">
<div id="audDiv">
<audio id="myPlayer" controls="controls" loop="loop"></audio>
<div id="add1">+</div>
</div>
<div id="mLiDiv"></div>
<div id="prompt">
<div>添歌&设置</div>
<input type="text" id="mName" placeholder="歌曲名称" /><br />
<input type="text" id="mUrl" placeholder="歌曲地址" /><br /><br />
<div style="text-align:center;">
<input id="subMe" type="button" value="添加" />
<input id="cancelMe" type="button" value="算了" />
<input id="dqxh" type="radio" name="rad" checked="checked" />单曲循环
<input id="lhbf" type="radio" name="rad" />轮回播放
</div>
</div>
</div>

<script language="javascript">

var aud = document.getElementById('myPlayer');
var mLi = document.getElementById('mLiDiv');
var mAdd = document.getElementById('add1');
var prom = document.getElementById('prompt');
var cancelMe = document.getElementById('cancelMe');
var subMe = document.getElementById('subMe');
var dqxh = document.getElementById('dqxh');
var lhbf = document.getElementById('lhbf');
var muAr = [
["http://www.kumeiwp.com/sub/filestores/2021/09/20/e9490b87ebcc4ad8c529d61211446997.mp3","樱岚karu-落"],
["http://www.kumeiwp.com/sub/filestores/2022/02/08/8b8d15b7d3de35d882e030d442785ca0.mp3","大古主题曲"],
["http://www.kumeiwp.com/sub/filestores/2021/03/01/1ff3a90dcf91f4a8d9e8a8a29583b7c3.mp3","可可托海的牧羊人"],
["http://www.kumeiwp.com/sub/filestores/2022/02/08/c4598a328b0b6a04000fc461e69737d5.mp3","EDM - DJ纯音乐电音版"],
["http://www.kumeiwp.com/sub/filestores/2022/02/08/0ae220cf33d11a63e66c766a4b9e0b61.mp3","曲以硬为贵"],
["http://www.kumeiwp.com/sub/filestores/2022/02/08/7a7eeb0e19ac0aa6fc28683a11a73a03.mp3","额尔古纳乐队 - 酒歌"],
["http://www.kumeiwp.com/sub/filestores/2022/02/08/58c8cb04dd22fc5b3dbb97f4a6828b72.mp3","夜色"],
["http://www.kumeiwp.com/sub/filestores/2022/02/05/88581e4d7928eda819305dd55769631a.mp3","十送红军"]
];
var playIdx = 0;
var str = "";

for(i=0;i<muAr.length; i++) {
str += (i+1) + ".<a id='list" + i + "' onclick='iPlay(" + i + ")' >" + muAr + "</a><br />";
}

mLi.innerHTML += str;

function iPlay(idx){
playIdx = idx;
aud.src = muAr;
aud.play();
nameRed(playIdx);
}

mAdd.onclick = function(){
prom.style.display = "block";
}

cancelMe.onclick = function(){
prom.style.display = "none";
}

subMe.onclick = function(){
let uri = document.getElementById('mUrl');
let name = document.getElementById('mName');
let tnum = muAr.length;
let str1 = uri.value;
let str2 = name.value;
if(str1 !="" && str2 != ""){
muAr = ;
mLi.innerHTML += (tnum+1) + ".<a id='list" + tnum + "' onclick='iPlay(" + tnum + ")' >" + str2 + "</a><br />";
iPlay(tnum);
uri.value = "";
name.value = "";
}
prom.style.display = "none";
}

function howplay(){
dqxh.checked ? aud.loop = true :(aud.loop = false,playNext(),aud.addEventListener('ended',playNext,false));
prom.style.display = "none";
}
function playNext(){
iPlay(playIdx);
playIdx += 1;
if(playIdx >= muAr.length) playIdx = 0;
}

function nameRed(){
for(i=0;i<muAr.length;i++){
let listId = "list" + i;
document.getElementById(listId).style.color = "black";
}
listId = "list" + playIdx;
document.getElementById(listId).style.color = "red";
}

</script>

红影发表于 2022-2-9 08:58

脱网编写的代码还这么复杂，黑黑简直太厉害了{:4_199:}

红影发表于 2022-2-9 09:00

我想怎么还有一句“算了”，原来点哪个加号是可以自己添加歌曲或者不添加{:4_173:}

红影发表于 2022-2-9 09:11

这个里面看到了let，不再是var

小辣椒 发表于 2022-2-9 15:13

这个我全不懂{:4_203:}

马黑黑 发表于 2022-2-9 19:17

小辣椒发表于 2022-2-9 15:13
这个我全不懂

你就帮忙试用一下，说说感受

马黑黑 发表于 2022-2-9 19:20

红影发表于 2022-2-9 08:58
脱网编写的代码还这么复杂，黑黑简直太厉害了

{:5_109:}

马黑黑 发表于 2022-2-9 19:21

红影发表于 2022-2-9 09:11
这个里面看到了let，不再是var

let和var还是有区别的，能用的时候用，不能用是不要用

马黑黑 发表于 2022-2-9 19:22

红影发表于 2022-2-9 09:00
我想怎么还有一句“算了”，原来点哪个加号是可以自己添加歌曲或者不添加

算了，就是取消、放弃的意思{:5_117:}

红影发表于 2022-2-10 16:41

马黑黑发表于 2022-2-9 19:21
let和var还是有区别的，能用的时候用，不能用是不要用

哦哦，我是分不出两者的区别。

红影发表于 2022-2-10 16:42

马黑黑发表于 2022-2-9 19:22
算了，就是取消、放弃的意思

可以自己加歌曲名和歌曲，还能选择循环方式，这个太赞了{:4_199:}

红影发表于 2022-2-10 16:44

“曲以硬为贵”，这歌名看到就想笑{:4_173:}

马黑黑 发表于 2022-2-10 16:45

红影发表于 2022-2-10 16:44
“曲以硬为贵”，这歌名看到就想笑

这是上传者乱命名的{:5_117:}

马黑黑 发表于 2022-2-10 16:45

红影发表于 2022-2-10 16:42
可以自己加歌曲名和歌曲，还能选择循环方式，这个太赞了

但不知有啥不合适

马黑黑 发表于 2022-2-10 16:46

红影发表于 2022-2-10 16:41
哦哦，我是分不出两者的区别。

多数情况是通用的，有些特殊情形需要注意

红影发表于 2022-2-10 18:37

马黑黑发表于 2022-2-10 16:45
这是上传者乱命名的

好玩，肯定也是个爱玩闹的人{:4_173:}

红影发表于 2022-2-10 18:38

马黑黑发表于 2022-2-10 16:45
但不知有啥不合适

很好啊，外观漂亮，功能方便{:4_204:}

红影发表于 2022-2-10 18:39

马黑黑发表于 2022-2-10 16:46
多数情况是通用的，有些特殊情形需要注意

我只使用常规情况就好。

页: [1] 2 3

花潮论坛's Archiver

测试 audio 播放器