F.I.R.飞儿乐团曲16首
<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; font-size:10px; }
#audDiv audio { position: relative; left: -30px; width:260px; opacity: .9; }
#audDiv div { 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 { 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 { 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; }
#audDiv input { cursor:pointer; }
</style>
</head>
<body>
<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 + "</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.trim();
let str2 = name.value.trim();
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>
好听，这么多歌曲，边听歌边学习代码{:4_187:} 这个播放器和签名那个相比是两排歌名的排列。歌曲调用非常快速，真棒{:4_187:} 本帖最后由 马黑黑 于 2022-2-11 18:39 编辑 <br /><br />千年之恋<br> 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
挺漂亮的制作。听了好一会其中的歌曲了。
还可以添歌{:5_117:} [ 本帖最后由 马黑黑 于 2022-2-11 20:58 编辑 ]\n\n<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 { 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 { 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; }
#audDiv input { 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 + "</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.trim();
let str2 = name.value.trim();
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-11 20:29
还可以添歌
有这么多听听已经很不错了，懒得再去找了{:4_173:} 代码偏长，不好发，10楼里，【code】和【/code】之间的就是全部代码 黑黑这个我明天晚上试一次，这个播放器长度再短一点就在框里面了吧 改了尺寸电脑预览好的，发上来没有了{:4_173:} 测试了上传可以的
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
好主意。还有，主窗体的颜色可以更换。
好的，按背景图设置
页:
[1]
2