F.I.R.飞儿乐团曲16首

马黑黑

单曲 轮播

+

添歌

红影

好听，这么多歌曲，边听歌边学习代码

红影

这个播放器和签名那个相比是两排歌名的排列。歌曲调用非常快速，真棒

马黑黑

千年之恋
http://www.kumeiwp.com/sub/filestores/2022/02/11/9e1e5678de602c5631b9d8de44c222f4.mp3

马黑黑

红影 发表于 2022-2-11 18:32
这个播放器和签名那个相比是两排歌名的排列。歌曲调用非常快速，真棒

没有大的修改，仅调整了一些小细节

红影

马黑黑 发表于 2022-2-11 18:40
没有大的修改，仅调整了一些小细节

挺漂亮的制作。听了好一会其中的歌曲了。

绿叶清舟

以后可以自己整专辑了啊

马黑黑

绿叶清舟 发表于 2022-2-11 20:22
以后可以自己整专辑了啊

应该可以的吧

马黑黑

红影 发表于 2022-2-11 20:14
挺漂亮的制作。听了好一会其中的歌曲了。

还可以添歌

马黑黑

[ 本帖最后由 马黑黑 于 2022-2-11 20:58 编辑 ]\n\n[code]<style type="text/css">
#waiDiv { margin:10px auto; padding:8px; width:400px; background:#696969; 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: -30px; width:260px; 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:#eee; 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 = [
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/f9e4be56f769c3a645da9164890f6ae4.mp3","微光"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/4370789d33a3d9f6aab39cdb09ef497e.mp3","月牙湾"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/16b9a8fbc736c5932f99a30522faf777.mp3","千年之恋(纯音乐)"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/1966fd09f2b0845478ed5d01e6d3eee1.mp3","把爱放开"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/d2f11b14ef293735d2682e673de862a8.mp3","亚特兰提斯"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/382d77680421635aef3f704a25ed85a3.mp3","无限"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/3e437eed4df41abdf1fd9a2b614fbb61.mp3","我们的爱(原创)"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/64667d0152d0d419543ad0945326c593.mp3","螺丝钉"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/e3f57bb60f213216eb731b1c95e7c8d0.mp3","你的微笑"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/6268a628eeee01531d41d52dbd297a68.mp3","我要飞"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/0500c7bd0ea1883251fc15ccfdbddc13.mp3","光芒"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/9855ae507c13319c3925cdbb1dd4425b.mp3","心之火"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/4d48c2b763fb6ce5aad374277d7f7342.mp3","刺鸟"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/3f308bb3624004e4fa08b68146fb6c8b.mp3","龙的崛起"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/8e3bcf6bcf4b780b8f4c2d10775cabb0.mp3","一百年后"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/11/3daf0208fd475200e7299fde6592d262.mp3","Fly Away"]
];
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>[/code]

红影

马黑黑 发表于 2022-2-11 20:29
还可以添歌

有这么多听听已经很不错了，懒得再去找了

马黑黑

代码偏长，不好发，10楼里，【code】和【/code】之间的就是全部代码

小辣椒

黑黑这个我明天晚上试一次，这个播放器长度再短一点就在框里面了吧

小辣椒

改了尺寸电脑预览好的，发上来没有了

小辣椒

测试了上传可以的

小辣椒

https://adisk.365.tf/html/bfq.html

马黑黑

小辣椒 发表于 2022-2-11 21:35
https://adisk.365.tf/html/bfq.html

你有空间，可以考虑另外封装，我提供的代码是基于论坛的

小辣椒

马黑黑 发表于 2022-2-11 22:27
你有空间，可以考虑另外封装，我提供的代码是基于论坛的

是的，我可以加背景图片

马黑黑

小辣椒 发表于 2022-2-11 22:37
是的，我可以加背景图片

好主意。还有，主窗体的颜色可以更换。

小辣椒

马黑黑 发表于 2022-2-11 22:41
好主意。还有，主窗体的颜色可以更换。

好的，按背景图设置