试验

加林森

+

添歌&设置

单曲循环 轮回播放

加林森

@马黑黑   还是不行？

绿叶清舟

队长没加连接？

马黑黑

加林森 发表于 2022-2-12 20:59
@马黑黑   还是不行？

这个样子，是帖子发出后，JS代码被破坏

加林森

绿叶清舟 发表于 2022-2-12 21:33
队长没加连接？

加了的啊

加林森

加林森 发表于 2022-2-12 22:14
加了的啊

是的，我把代码发出来供大家参考吧。

加林森

<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[id=add1] { 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[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; }
#prompt input[type=radio] { 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[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;
        let str2 = name.value;
        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>

加林森

失败的代码，大家可以参考！

元时而

失败时成功之母
请问什么是成功之父

加林森

元时而 发表于 2022-2-12 22:23
失败时成功之母
请问什么是成功之父

小家伙，跑过来是不是想挨打啊？

红影

队长只是替换歌曲么？要是完全是原来的，怎么会不行？

加林森

红影 发表于 2022-2-13 10:49
队长只是替换歌曲么？要是完全是原来的，怎么会不行？

我在另外的地方可以，但是，只能放一首歌曲，所以把我搞晕了。

红影

加林森 发表于 2022-2-13 10:58
我在另外的地方可以，但是，只能放一首歌曲，所以把我搞晕了。

黑黑发的时候就说这个有点问题，队长可以去试试那个16首的。

加林森

红影 发表于 2022-2-13 12:09
黑黑发的时候就说这个有点问题，队长可以去试试那个16首的。

老黑说的后面的代码要全部是斜的才对的。论坛不支持吧。

元时而

加林森 发表于 2022-2-13 12:14
老黑说的后面的代码要全部是斜的才对的。论坛不支持吧。

把显示器歪一下，看上去就斜了

元时而

加林森 发表于 2022-2-12 22:38
小家伙，跑过来是不是想挨打啊？

我远来是客，打也得是打赏啊

红影

加林森 发表于 2022-2-13 12:14
老黑说的后面的代码要全部是斜的才对的。论坛不支持吧。

全部是斜的？没看懂。

加林森

红影 发表于 2022-2-13 14:07
全部是斜的？没看懂。

你到他发这个帖里面去看，他说的都在。

加林森

元时而 发表于 2022-2-13 14:01
我远来是客，打也得是打赏啊

哈哈，不错不错。

加林森

元时而 发表于 2022-2-13 13:58
把显示器歪一下，看上去就斜了

你试没有？