论坛 › 欢乐水吧 › 《发烧四大天后》在线欣赏（学习黑黑的专辑教程2制作）

小辣椒 发表于 2022-2-21 21:10

《发烧四大天后》在线欣赏（学习黑黑的专辑教程2制作）

<style type="text/css">/*2022*/
#waiDiv { margin:10px; float:right; padding:8px; width:400px; background:#1daefd; 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; position: relative; }
#add1 { margin-left: 12px; background:#eee; text-align:center; width:20px; height:20px; line-height:20px; border-radius:50%; cursor:pointer; }
#add1:hover { color: red; }
#mLiDiv { margin-top: 10px; background:#f2fdff; color:#000; min-height:100px; padding:10px; border:1px solid olive; font-size:14px; column-count: 2;}
#mLiDiv a { text-decoration: none; cursor:pointer; }
#mLiDiv a:hover { color:red; }
#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, #audDiv input { cursor:pointer; }
#paDiv { margin: auto; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; position: relative; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }</style><div style="position:relative;left:-203px;width:999px;height:945px;top: 150px;background:#eee url('http://image.hnol.net/c/2022-02/21/15/202202211557381141-5087368.gif') no-repeat; ">
<div id="waiDiv"><div id="audDiv"><div id="paDiv"><div id="btn-ro">·</div><div id="jindu"><div id="jd-go"></div></div></div><input id="muted" type="checkbox" onclick="aud.muted = this.checked ? true : false" />静音<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></div><script>/*2022*/
var muAr = [
        ["https://oss.shandianpan.com/10f467633baee452b241405c7579dd9b.mp3","女人如烟"],
        ["https://oss.shandianpan.com/12e092edc96f2af5eae2c5c356b9c6b6.mp3","我们的歌谣"],
        ["https://oss.shandianpan.com/4273ee335a24e8e95d1291a74d16f989.mp3","成都"],
        ["https://oss.shandianpan.com/82f0fb013fdb0b21dd539ed3191f0d19.mp3","解脱"],
        ["https://oss.shandianpan.com/54cb798900a4472de03b27dcbf7f602a.mp3","你就是我最想要的丫头"],
        ["https://oss.shandianpan.com/e6ff5de3ce02a903813b550aa0a46660.mp3","以后的以后"],
        ["https://oss.shandianpan.com/382726168f04a79a0c66a90ce37605e3.mp3","爱你一世到来生"],
        ["https://oss.shandianpan.com/ba572cbc558d81fef1a89f8597daee8c.mp3","我是不是该安静地走开"],
        ["https://oss.shandianpan.com/a5ca16ec2b6a190e5fd0a6f3dacb9725.mp3","小小"],
        ["https://oss.shandianpan.com/5482639b1aa84f9880886c23064d42bc.mp3","烟花易冷"],
                ["https://oss.shandianpan.com/5fc427a0214cca602de208830887b12f.mp3","南山南"],
        ["https://oss.shandianpan.com/6ca6f785d7110a1bf82eeae2216d2e4f.mp3","关不上的窗"]
];

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
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 aud = document.createElement('audio');
aud.loop = true;
var playIdx = 0; //当前曲索引
if(aud.paused) btn.style.animationPlayState="paused";
//写歌单
var str = "";
for(j=0; j<muAr.length; j++) {
        str += (j+1) + ".<a id='list" + j + "' onclick='iPlay(" + j + ");howplay();' >" + muAr + "</a><br />";
}
mLi.innerHTML += str;

function iPlay(idx){ //播放函数
        playIdx = idx;
        aud.src = muAr;
        aud.play();
        aud.addEventListener('timeupdate', tmMsg, true);
        aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
        btn.style.animationPlayState="running";
        nameRed(playIdx);
}

function howplay(){ //单曲&轮播处理
        dqxh.checked ? aud.loop = true : (aud.loop = false,playNext(),aud.addEventListener('ended',playNext,false));
        prom.style.display = "none";
}

function playNext(){ //处理下一首
        if(aud.paused) iPlay(playIdx);
        playIdx += 1;
        if(playIdx >= muAr.length) playIdx = 0;
}

function nameRed(){ //歌单着色
        for(k=0;k<muAr.length;k++){
                let listId = "list" + k;
                document.getElementById(listId).style.removeProperty("color");
        }
        listId = "list" + playIdx;
        document.getElementById(listId).style.color = "red";
}

function tmMsg(){ //进度条
        let auT = Math.floor(aud.duration - aud.currentTime);
        let auM = auT / 60;
        let auMs = parseInt(auM);
        if (auMs <10) auMs = "0" + auMs;
        let auS = auT % 60;
        let auSs = Math.round(auS);
        if (auSs < 10) auSs = "0" + auSs;
        let jd = (100*aud.currentTime)/aud.duration;
        if(jd>0) {
                jindu.innerHTML = "- " + auMs +":" + auSs;
                jindu.style.backgroundSize = jd+ "% 8px";
        }
}

jindu.onclick = function(){ //进度控制
        let w = offset(jindu,"left");
        let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
        aud.currentTime = x;
}

function offset(obj,direction){//获取元素总偏移量
        let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
        let realNum = obj;
        let positionParent = obj.offsetParent;
        while(positionParent != null){
                realNum += positionParent;
                positionParent = positionParent.offsetParent;
        }
        return realNum;
}

btn.onclick = function(){ //光盘按钮点击事件
        aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

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 + ");howplay();' >" + str2 + "</a><br />";
                iPlay(tnum);
                howplay();
                uri.value = "";
                name.value = "";
        }
        prom.style.display = "none";
}
//自动播放（默认播放第一首）
iPlay(playIdx);

</script>
<br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-2-21 21:13

http://image.hnol.net/c/2022-02/21/17/20220221172315441-5087368.gif



专辑名称：发烧四大天后 2CD
专辑艺人：李梦瑶-张玮伽-谭艳-孙露
唱片公司：丽声唱片
发行时间：2017年7月

专辑简介：
李梦瑶-张玮伽-谭艳-孙露，极度HI-FI真谛！
专业音响技师推荐的试机大碟。给你耳朵前所未有的震撼

专辑曲目CD1
01 你的背包
02 孤枕难眠
03 那些花儿
04 安和桥
05 成都（在线欣赏）
06 别了 耳听爱情的年纪
07 你就是我想要的丫头（在线欣赏）
08 爱你一世到来生（在线欣赏）
09 驿动的心
10 我是不是该安静的走开（在线欣赏）
11 烟花易冷（在线欣赏）
12 一次就好
13 不将就
14 蓝莲花
15 别让爱你的人流泪

CD2
01 女人如烟（在线欣赏）
02 无心伤害
03 我们的歌谣（在线欣赏）
04 稳稳的幸福
05 野子
06 解脱（在线欣赏）
07 以后的以后（在线欣赏）
08 你还要我怎样
09 为情所伤
10 小小（在线欣赏）
11 伤了心的女人怎么了
12 你在哪里
13 南山南（在线欣赏）
14 关不上的窗（在线欣赏）
15 死心塌地去爱你

小辣椒 发表于 2022-2-21 21:16

黑黑这个教程分享我看了好久的代码，但这个播放器定位我移动不好，要一个个分类移动，一不小心就出错，可能我对这些代码理解不了，最后就依样画葫芦，找了这个图片，播放器放这里了@马黑黑

小辣椒 发表于 2022-2-21 21:18

移动一不小心那添歌列表尺寸就不对了，反正这个播放器移动不好，上次专辑1的教程我做的播放器移动是加了网页代码才好的，这次没有，直接发论坛的{:4_203:}

小辣椒 发表于 2022-2-21 21:22

抖音热曲欣赏
https://www.huachaowang.com/foru ... =56956&fromuid=4275
(出处: 花潮论坛)


这个是加网页代码的

红影 发表于 2022-2-22 10:07

这么多好歌，亲爱的好棒{:4_199:}

红影 发表于 2022-2-22 10:08

这么多动画元素，那个烟还是点燃，看着香烟袅袅升起，听着好歌，真是好享受{:4_199:}

红影 发表于 2022-2-22 10:10

小辣椒 发表于 2022-2-21 21:16
黑黑这个教程分享我看了好久的代码，但这个播放器定位我移动不好，要一个个分类移动，一不小心就出错，可能 ...

这个位置不移动也挺好看的，只是一评分就出现双音的事有点麻烦{:4_173:}

加林森 发表于 2022-2-22 17:08

现在是一个声音的。{:4_187:}{:4_199:}

大猫咪 发表于 2022-2-22 19:50

经典，都是好听的歌，非常喜欢，辣椒好分享，真棒！

{:4_204:}{:4_190:}

马黑黑 发表于 2022-2-22 20:01

小辣椒 发表于 2022-2-21 21:16
黑黑这个教程分享我看了好久的代码，但这个播放器定位我移动不好，要一个个分类移动，一不小心就出错，可能 ...

不用一个一个分类移动，移动播放器的外框就可以

小辣椒 发表于 2022-2-22 22:10

红影 发表于 2022-2-22 10:07
这么多好歌，亲爱的好棒

亲爱的，专辑歌曲数字比较多，我就选了12首{:4_173:}

小辣椒 发表于 2022-2-22 22:11

红影 发表于 2022-2-22 10:08
这么多动画元素，那个烟还是点燃，看着香烟袅袅升起，听着好歌，真是好享受

这个图玩过几次的，这次加大了尺寸

小辣椒 发表于 2022-2-22 22:11

红影 发表于 2022-2-22 10:10
这个位置不移动也挺好看的，只是一评分就出现双音的事有点麻烦

这个上次你说黑黑知道的？

小辣椒 发表于 2022-2-22 22:12

加林森 发表于 2022-2-22 17:08
现在是一个声音的。

队长晚上好{:4_187:}

小辣椒 发表于 2022-2-22 22:13

大猫咪 发表于 2022-2-22 19:50
经典，都是好听的歌，非常喜欢，辣椒好分享，真棒！

猫猫好，专辑分享就是这样的，我2个专辑选了12首自己感觉好听的{:4_173:}

小辣椒 发表于 2022-2-22 22:13

马黑黑 发表于 2022-2-22 20:01
不用一个一个分类移动，移动播放器的外框就可以

谢谢黑黑，我那边看见你的回复了，我会去找一下的

加林森 发表于 2022-2-22 22:28

小辣椒 发表于 2022-2-22 22:12
队长晚上好

小辣椒晚上好。

马黑黑 发表于 2022-2-23 09:50

小辣椒 发表于 2022-2-22 22:13
谢谢黑黑，我那边看见你的回复了，我会去找一下的

{:5_108:}

红影 发表于 2022-2-23 10:25

小辣椒 发表于 2022-2-22 22:10
亲爱的，专辑歌曲数字比较多，我就选了12首

都挺好听的呢{:4_187:}

查看完整版本: 《发烧四大天后》在线欣赏（学习黑黑的专辑教程2制作）