论坛 › 音乐沙龙 › 司南 - 星辰如眸

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

司南 - 星辰如眸

<style>
#bigPa { position: relative; left: -204px; width: 1000px; height: 565px; background:#333 url('/data/attachment/forum/202202/14/122702ng48mingmvnwqlem.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 500px; float: right; column-count:2; color: #eee; font-size: 1em; text-shadow: 1px 1px 1px #111; }
#paDiv { position: relative; left: 10px; top: 10px; 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; }
#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 id="bigPa">
        <div id="paDiv">
                <div id="btn-ro">·</div>
                <div id="jindu">
                        <div id="jd-go"></div>
                </div>
        </div>
        <div id="gcDiv">
星辰如眸- 司南<br /><br />
(《一见倾心》电视剧片头曲)<br /><br />
词&曲：浅紫<br />
编曲：王德隆<br />
和声：司南<br />
和声编写：涂忆<br />
吉他：陈麒元<br />
混音：陈秋洁<br />
制作人：江潮<br />
监制：浅紫<br />
歌曲制作公司：众匠（北京）文化传媒有限公司<br /><br />
清晨 烟雨 黄昏 倾世温柔<br />
少年 戎装 驰骋 星辰如眸<br />
眼神 温暖 坚定 漫笑浮生<br />
是一段风华 一指流砂 蓦然回首<br />
冬天 雪花飘落的季节<br />
你怀中却似春天 花香布满了世间<br />
良辰好景入夏天 树荫遮住了眷恋<br />
沁心于你在秋天 情深绵绵散落<br />
叶翩翩 情渐渐<br />
清晨 烟雨 黄昏 倾世温柔<br />
少年 戎装 驰骋 星辰如眸<br />
眼神 温暖 坚定 漫笑浮生<br />
是一段风华 一指流砂 蓦然回首<br />
冬天 雪花飘落的季节<br />
你怀中却似春天 花香布满了世间<br />
良辰好景入夏天 树荫遮住了眷恋<br />
沁心于你在秋天 情深绵绵散落<br />
叶翩翩 情渐渐<br />
冬天 雪花飘落的季节<br />
你怀中却似春天 花香布满了世间<br />
良辰好景入夏天 树荫遮住了眷恋<br />
沁心于你在秋天 情深绵绵散落<br />
叶翩翩 情渐渐<br />
        </div>
</div>

<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
aud.loop = true;
// 音乐地址放在下行引号内
aud.src = "https://sharefs.ali.kugou.com/202202141122/9626bb13fdecbc4bab7505de58495c93/KGTX/CLTX001/b39d43ac8fa57c9de3674fd73ba0754b.mp3";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);
aud.play();

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;
        jindu.innerHTML = "- " + auMs +":" + auSs;
        let jd = (100*aud.currentTime)/aud.duration;
        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");
}

</script>

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

音乐是从酷狗那里扒下来的，也不知是否可以正常播放

绿叶清舟 发表于 2022-2-14 13:14

马黑黑 发表于 2022-2-14 12:37
音乐是从酷狗那里扒下来的，也不知是否可以正常播放

酷狗音乐相对音质是最好的，可以放，但只能二十四个小时的吧

马黑黑 发表于 2022-2-14 13:28

绿叶清舟 发表于 2022-2-14 13:14
酷狗音乐相对音质是最好的，可以放，但只能二十四个小时的吧

我不知道，我第一次扒的，先看看

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

漂亮，这个播放器的具体运用，文字也是用代码弄上去的。黑黑的运用范本{:4_187:}

绿叶清舟 发表于 2022-2-14 16:58

马黑黑 发表于 2022-2-14 13:28
我不知道，我第一次扒的，先看看

后台扒来的?那里源文件地址部分的代码都保密过的拿不到，只有用搜索台的

马黑黑 发表于 2022-2-14 17:04

红影 发表于 2022-2-14 14:11
漂亮，这个播放器的具体运用，文字也是用代码弄上去的。黑黑的运用范本

嗯，测试一下播放器的场景适应

马黑黑 发表于 2022-2-14 17:05

绿叶清舟 发表于 2022-2-14 16:58
后台扒来的?那里源文件地址部分的代码都保密过的拿不到，只有用搜索台的
我用声呐系统挖来的，有就能挖到，没有挖不到

绿叶清舟 发表于 2022-2-14 17:07

马黑黑 发表于 2022-2-14 17:05
我用声呐系统挖来的，有就能挖到，没有挖不到

抓鱼的啊{:4_189:}

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

绿叶清舟 发表于 2022-2-14 17:07
抓鱼的啊

差不多差不多

红影 发表于 2022-2-14 20:34

马黑黑 发表于 2022-2-14 17:04
嗯，测试一下播放器的场景适应

放在这个背景里很好看呢{:4_187:}

马黑黑 发表于 2022-2-15 08:41

红影 发表于 2022-2-14 20:34
放在这个背景里很好看呢

一般般

红影 发表于 2022-2-15 10:48

马黑黑 发表于 2022-2-15 08:41
一般般

黑黑牌的播放器，放在哪都好看{:4_199:}

马黑黑 发表于 2022-2-15 11:56

红影 发表于 2022-2-15 10:48
黑黑牌的播放器，放在哪都好看

估计与颜色有关：黑色是万能色

马黑黑 发表于 2022-2-15 12:06

绿叶清舟 发表于 2022-2-14 17:07
抓鱼的啊

24小时到了

马黑黑 发表于 2022-2-15 12:13

<script>
aud.src = "https://638183.freep.cn/638183/imusic/xcrm.mp3";
aud.play();
</script>
换个地址看看

大猫咪 发表于 2022-2-15 13:51

老黑制作越来越浪漫了，真棒！   这歌还第一次欣赏，非常好听！

元宵节快乐！

{:4_204:}{:4_199:}

红影 发表于 2022-2-15 14:42

马黑黑 发表于 2022-2-15 11:56
估计与颜色有关：黑色是万能色

怪不得你叫黑黑，万能的万能{:4_173:}

马黑黑 发表于 2022-2-15 15:42

红影 发表于 2022-2-15 14:42
怪不得你叫黑黑，万能的万能

那叫万万不能

马黑黑 发表于 2022-2-15 15:45

大猫咪 发表于 2022-2-15 13:51
老黑制作越来越浪漫了，真棒！   这歌还第一次欣赏，非常好听！

元宵节快乐！

这个不错的。猫咪节日好

查看完整版本: 司南 - 星辰如眸