加林森 发表于 2021-12-5 20:10
还在找.......
慢慢来不急
本帖最后由 加林森 于 2022-2-12 18:46 编辑 <br /><br />马黑黑 发表于 2021-12-5 20:23
慢慢来不急
现在找到了,已经发出来了。
<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 = [
["https://www.joy127.com/url/88626.mp3","潇洒的走"],
["https://www.joy127.com/url/88624.mp3","古城新韵"],
["https://www.joy127.com/url/88615.mp3","别让我一个人醉"],
["https://www.joy127.com/url/88613.mp3","闹元宵"],
["https://www.joy127.com/url/88618.mp3","迷宫"],
["https://www.joy127.com/url/88617.mp3","爱到底怎么了"],
["https://www.joy127.com/url/88616.mp3","爱的天堂"],
["https://www.joy127.com/url/88623.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>
加林森 发表于 2021-12-5 21:28
现在找到了,已经发出来了。
挺好,挺好
本帖最后由 加林森 于 2022-2-12 18:46 编辑 <br /><br />马黑黑 发表于 2021-12-5 22:28
挺好,挺好
看见了?
<p><audio id="aud" controls="controls"></audio></p>
<script language="javascript">
var arMusic = [
"http://www.kumeiwp.com/sub/filestores/2021/01/26/3257549a45c411cb86e2472da1afa6d8.mp3",
"http://www.kumeiwp.com/sub/filestores/2022/02/07/12131912b65351a1f1d0aa457dedb4f4.mp3",
"http://www.kumeiwp.com/sub/filestores/2022/02/06/6a524753261e4b121a8dc02afea2a86d.mp3"
];
var aud = document.getElementById("aud");
var idx = 0;
aud.src = arMusic;
aud.play();
aud.addEventListener('ended', playNext, false);
function playNext() {
idx += 1;
if(idx >= arMusic.length) idx = 0;
aud.src = arMusic;
aud.play();
}
</script>
加林森 发表于 2021-12-5 22:28
看见了?
看见啥
马黑黑 发表于 2021-12-5 22:29
看见啥
我新发的帖啊。
加林森 发表于 2021-12-5 22:51
我新发的帖啊。
看见了
马黑黑 发表于 2021-12-5 23:13
看见了
是什么
这个不是红马吗
马黑黑 发表于 2021-12-6 07:40
这个不是红马吗
另外一个,不是这个。
加林森 发表于 2021-12-6 17:02
另外一个,不是这个。
另外一个也看到了
马黑黑 发表于 2021-12-6 18:40
另外一个也看到了
那就好那就好
加林森 发表于 2021-12-6 18:52
那就好那就好
对对
马黑黑 发表于 2021-12-6 18:53
对对
嗯嗯
加林森 发表于 2021-12-6 19:13
嗯嗯
这就好
马黑黑 发表于 2021-12-6 19:47
这就好
当然啊
加林森 发表于 2021-12-6 20:50
当然啊
当然当然
马黑黑 发表于 2021-12-6 22:10
当然当然
我现在又发了一个出来,你去看看。
加林森 发表于 2021-12-6 22:16
我现在又发了一个出来,你去看看。
好的好的
马黑黑 发表于 2021-12-6 22:16
好的好的
是《高山流水》啊