测试 audio 播放器 - 第2页 - 马黑黑教程专版 - 花潮论坛

马黑黑 发表于 2022-2-11 08:17

红影发表于 2022-2-10 18:38
很好啊，外观漂亮，功能方便

{:5_109:}

马黑黑 发表于 2022-2-11 08:18

红影发表于 2022-2-10 18:39
我只使用常规情况就好。

嗯，就酱的

红影发表于 2022-2-11 12:28

马黑黑发表于 2022-2-11 08:18
嗯，就酱的

其他的我更不会{:4_189:}

马黑黑 发表于 2022-2-11 12:39

红影发表于 2022-2-11 12:28
其他的我更不会

总会会的

红影发表于 2022-2-11 13:11

马黑黑发表于 2022-2-11 12:39
总会会的

那还不知道是什么时候的事了。

马黑黑 发表于 2022-2-11 13:16

红影发表于 2022-2-11 13:11
那还不知道是什么时候的事了。

反正不是百年之后{:4_170:}

红影发表于 2022-2-11 20:04

马黑黑发表于 2022-2-11 13:16
反正不是百年之后

这一竿子也支得太远了{:4_173:}

马黑黑 发表于 2022-2-11 20:33

红影发表于 2022-2-11 20:04
这一竿子也支得太远了

不算远的，以及做好打算九千年

红影发表于 2022-2-11 21:08

马黑黑发表于 2022-2-11 20:33
不算远的，以及做好打算九千年

九千年后，也许技术进步了，心念一动，就有设备去响应，会更简单{:4_173:}

马黑黑 发表于 2022-2-11 22:30

红影发表于 2022-2-11 21:08
九千年后，也许技术进步了，心念一动，就有设备去响应，会更简单

你说的是意念控制能力

红影发表于 2022-2-12 13:13

马黑黑发表于 2022-2-11 22:30
你说的是意念控制能力

是啊，捕捉脑波信号，就不用手指来“说话”了{:4_173:}

加林森 发表于 2022-2-12 17:28

这个连续播放器真好，有空我试一试。

加林森 发表于 2022-2-12 18:41

本帖最后由加林森于 2022-2-12 20:46 编辑 <br /><br /><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>

加林森 发表于 2022-2-12 18:42

@马黑黑帮着我看看，为什么是错的？

马黑黑 发表于 2022-2-12 20:03

本帖最后由马黑黑于 2022-2-12 20:05 编辑

加林森发表于 2022-2-12 18:42
@马黑黑帮着我看看，为什么是错的？
错误的出现在于论坛对JS代码的 [ i ] 做了解析，解析为斜体字体

加林森 发表于 2022-2-12 20:12

马黑黑发表于 2022-2-12 20:03
错误的出现在于论坛对JS代码的[ i ] 做了解析，解析为斜体字体

真奇怪

马黑黑 发表于 2022-2-12 20:14

加林森发表于 2022-2-12 20:12
真奇怪

你懂的读代码的话，我说的你马上就懂。等下我截个图给你，你自己比较一下代码

马黑黑 发表于 2022-2-12 20:17

加林森发表于 2022-2-12 20:12
真奇怪

你查看你源码中和这个截图相近的部分，看看是不是中括号里的 i 连同中括号被吞掉了：

加林森 发表于 2022-2-12 20:21

马黑黑发表于 2022-2-12 20:14
你懂的读代码的话，我说的你马上就懂。等下我截个图给你，你自己比较一下代码

好的

加林森 发表于 2022-2-12 20:31

马黑黑发表于 2022-2-12 20:17
你查看你源码中和这个截图相近的部分，看看是不是中括号里的 i 连同中括号被吞掉了：

for(i=0; i<muAr.length; i++) { str += (i+1) + ".<a id='list" + i + "' onclick='iPlay(" + i + ")' >" + muAr + "</a><br />";}
现在是这样的，多了点代码，少了你的代码。

页: 1 [2] 3

花潮论坛's Archiver