|
|

楼主 |
发表于 2022-2-13 20:47
|
显示全部楼层
- <style type="text/css">
- #waiDiv { margin:10px auto; padding:8px; width:400px; background:#b01f00; 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; font-size:10px; }
- #audDiv audio { position: relative; left: 0px; width:200px; opacity: .9; }
- #audDiv div[id=add1] { margin:6px; background:#eee; text-align:center; width:30px; height:30px; line-height:30px; border-radius:50%; cursor:pointer; }
- #mLiDiv { margin-top: 10px; background:#eceadd; color:#000; min-height:100px; padding:10px; border:1px solid olive; font-size:1em; column-count: 2; }
- #mLiDiv a { text-decoration: none; cursor:pointer; }
- #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[type=text] { margin:4px;padding:4px; width:392px; }
- #prompt input[type=button] { border-radius:4px; cursor:pointer; border:1px solid gray; border-radius:3px; box-shadow: 1px 1px 2px #444; }
- #audDiv input[type=radio] { cursor:pointer; }
- </style>
- <div id="waiDiv">
- <div id="audDiv">
- <audio id="myPlayer" controls="controls" loop="loop"></audio>
- <input id="dqxh" type="radio" name="rad" checked="checked" onclick="howplay()" />单曲
- <input id="lhbf" type="radio" name="rad" onclick="howplay()" />轮播
- <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 />
- <div style="text-align:center;">
- <input id="subMe" type="button" value=" 添加 " />
- <input id="cancelMe" type="button" value=" 算了 " />
- </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://oss.shandianpan.com/56eeb7441bab346cc52e2e6bbb31ee38.mp3","阿果吉曲 - 海来阿木"],
- ["https://oss.shandianpan.com/13a48c69b71211e972e40b85a910a3dd.mp3","爱情错觉 - 半吨兄弟"],
- ["https://oss.shandianpan.com/c12551462ad886b1c4f78e92ad87bb19.mp3","百花香--魏新雨"],
- ["https://oss.shandianpan.com/bba4f5853a7412622f96d9a37f27633b.mp3","别知己 - 海来阿木等"],
- ["https://oss.shandianpan.com/c1195cfefaa3c0a871617cccc89c6846.mp3","潮湿的心 - 小阿枫"],
- ["https://oss.shandianpan.com/d01f53ca06585167784aefafbadc9cda.mp3","大田后生仔"],
- ["https://oss.shandianpan.com/1781184f635949f30cdce0784a23e906.mp3","红尘来去一场梦"],
- ["https://oss.shandianpan.com/8e2b5977ef4be91e96ef200a8a9d96f0.mp3","酒醉的蝴蝶 - 崔伟立"],
- ["https://oss.shandianpan.com/7aa9b82ac300407c88dbe6e33011be8e.mp3","狂浪 - 花姐"],
- ["https://oss.shandianpan.com/3cb16d49da1b9f7b9212d4b11f8388fa.mp3","绿色 - 陈雪凝"],
- ["https://oss.shandianpan.com/6a0fa7336b58b494f0140b296e1f3a7f.mp3","芒种 - 音阙诗听"],
- ["https://oss.shandianpan.com/03cd3ffb06a70da528e520f4387abbfd.mp3","牧马城市 - 毛不易"],
- ["https://oss.shandianpan.com/1c8107e3a6695e994e3a0e6e1605b5fb.mp3","你的答案 - 阿冗"],
- ["https://oss.shandianpan.com/0a0a863b37d59002a70df42bb44280ef.mp3","你的酒馆对我打了烊"],
- ["https://oss.shandianpan.com/cbc890c394aaa6ab942c1c9ff8c8e27a.mp3","谁 - 雪十郎"],
- ["https://oss.shandianpan.com/8e4e3ca4f056d0de93c2636244fbde14.mp3","忘情牛肉面"],
- ["https://oss.shandianpan.com/4fdc1085429f17b48ce5a7a48ff6811d.mp3","像我这样的人"],
- ["https://oss.shandianpan.com/7a41d3ce7fa452fdcaf40b3e39a4f84d.mp3","野狼disco - 宝石"],
- ["https://oss.shandianpan.com/d7a3124ca1ce3778d851a40153e35d89.mp3","你笑起来真好看"],
- ["https://oss.shandianpan.com/2709b43817e625c8809c4df91019872b.mp3","桥边姑娘 - 海伦"]
- ];
- var playIdx = 0;
- var str = "";
- for(i=0;i<muAr.length; i++) {
- str += (i+1) + ".<a id='list" + i + "' onclick='iPlay(" + i + ")' >" + muAr[i][1] + "</a><br />";
- }
- mLi.innerHTML += str;
- function iPlay(idx){
- playIdx = idx;
- aud.src = muAr[playIdx][0];
- 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.trim();
- let str2 = name.value.trim();
- if(str1 !="" && str2 != ""){
- muAr[tnum] = [str1, str2];
- 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>
复制代码 |
|