星河叹（马黑黑原创）

朵拉发表于 2022-8-28 08:55

本帖最后由朵拉于 2022-8-28 17:21 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://pic.imgdb.cn/item/630abad516f2c2beb10f0468.jpg') no-repeat center/cover;box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#player { padding: 10px; position: absolute; left: 20px; bottom: 20px; width: fit-content; height: fit-content; display: flex; gap: 10px; flex-direction: column; }
#lrctext { font: bold 1.4em sans-serif; color: silver; text-shadow: 1px 1px 2px #000; user-select: none; transition: all 1.5s; }
#btnwrap { width: fit-content; height: fit-content; display: flex; gap: 8px; align-items: center; }
#btnmain { width: 36px; height: 36px; display: grid; place-items: center; background: rgba(0,0,0,.5); border-radius: 50%; cursor: pointer; transition: all 2s; }
#btnmain:hover { background: orange; }
#btnplay {width: 16px; height: 16px; background: #ccc; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prgline { width: 200px; height: 4px; background: #ccc linear-gradient(to right,red,orange,green,red) no-repeat center left; background-size: 1px 4px; cursor: pointer;}
#tmsg { font: normal 16px sans-serif; color: orange; user-select: none; text-shadow: 1px 1px 1px #000; transition: 1.5s; }
#tmsg:hover, #lrctext:hover { color: tomato; }
</style>

<div id="papa">
   <div id="player">
            <div id="lrctext">lrc歌词
</div>
            <div id="btnwrap">
                     <span id="btnmain"><span id="btnplay"></span><span id="btnpause"></span></span>
                     <span id="prgline"></span><span id="tmsg">00:00 | 00:00</span>
            </div>
   </div>
</div>

<script>
let lrcAr = [
   ['00.00', '星河叹 - 黄龄【制作：朵拉】'],

['27.95','遥啊遥楚天阔'],
['33.05','盼明月满星河'],
['39.34','一念拂袖花落'],
['44.63','谈笑间起风波'],
['50.99','飘啊飘无奈何'],
['56.09','叹恩怨难割舍'],
['62.52','是非乌有交错'],
['67.45','微微燃心中火'],
['75.64','是谁笑我人如槊心如漠'],
['81.95','是谁叹我一身胆忍离合'],
['88.01','长路漫漫长漂泊夜萧瑟'],
['93.73','风又起雨又落'],
['101.66','我笑青山依旧风雨捉不透'],
['108.16','我叹人生苦短荒唐事不休'],
['113.78','我盼孤身纵马笛声漫天四海任我游'],
['119.81','情字如雨落沾满了红袖'],
['151.01','是谁笑我人如槊心如漠'],
['156.72','是谁叹我一身胆忍离合'],
['162.97','长路漫漫长漂泊夜萧瑟'],
['168.36','风又起雨又落'],
['176.76','我笑青山依旧风雨捉不透'],
['183.17','我叹人生苦短荒唐事不休'],
['189.03','我盼孤身纵马笛声漫天四海任我游'],
['195.35','情字如雨落沾满了红袖'],
['200.01','我笑尘缘如梦镜花一场空'],
['206.41','我叹聚散无由何处能相逢'],
['212.38','我盼风云万里星汉灿烂爱恨一笑过'],
['218.26','天地路悠悠凌波入我眸'],
['223.84','天地路悠悠凌波入我眸']

];
let aud = new Audio();

aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/08/25/535aa5257b39689a10c46a52a0936f8b.mp3';
aud.autoplay = true;
aud.loop = true;
btnmain.onclick = () => aud.paused ? aud.play() : aud.pause();
prgline.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prgline.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
   prgline.style.backgroundSize = prgline.offsetWidth * aud.currentTime / aud.duration + 'px 4px';
   tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
   for(j=0; j<lrcAr.length; j++) {
            if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
   }
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
   if (!val) return '00:00';
   val = Math.floor(val);
   let min = parseInt(val / 60), sec = parseFloat(val % 60);
   if(min < 10) min = '0' + min;
   if(sec < 10) sec = '0' + sec;
   return min + ':' + sec;
}
</script>

加林森 发表于 2022-8-28 08:59

歌词没有编辑进来啊。制作漂亮。{:4_190:}

朵拉发表于 2022-8-28 09:02

@马黑黑
马师好看过来，这帖制作可还好{:4_190:}

朵拉发表于 2022-8-28 09:04

加林森发表于 2022-8-28 08:59
歌词没有编辑进来啊。制作漂亮。

森队好，这帖没跟进歌词{:4_190:}

马黑黑 发表于 2022-8-28 09:12

朵拉发表于 2022-8-28 09:02
@马黑黑
马师好看过来，这帖制作可还好

非常不错，图片选择配套主题。lrc歌词需要制作一个。

朵拉发表于 2022-8-28 09:17

马黑黑发表于 2022-8-28 09:12
非常不错，图片选择配套主题。lrc歌词需要制作一个。

马师，歌词部分手机党不方便学生慢慢来哈{:4_190:}

加林森 发表于 2022-8-28 09:45

朵拉发表于 2022-8-28 09:04
森队好，这帖没跟进歌词

哦。可惜了。

马黑黑 发表于 2022-8-28 09:51

朵拉发表于 2022-8-28 09:17
马师，歌词部分手机党不方便学生慢慢来哈

你可以考虑入手一个中柏二合一的设备，可当平板用，可做小笔记本，预装Windows 10以上系统。做帖子用的，999元到2000元内的就可以了

红影发表于 2022-8-28 10:37

这音乐加载比较慢，开始还以为没有音乐呢。欣赏朵宝漂亮的制作{:4_187:}

朵拉发表于 2022-8-28 12:02

本帖最后由朵拉于 2022-8-28 12:04 编辑

马黑黑发表于 2022-8-28 09:51
你可以考虑入手一个中柏二合一的设备，可当平板用，可做小笔记本，预装Windows 10以上系统。做帖子用的， ...
马师请教歌词代码是什么，怎么编辑{:4_190:}

加林森 发表于 2022-8-28 12:15

朵拉发表于 2022-8-28 12:02
马师请教歌词代码是什么，怎么编辑

看看这里：
花潮LRC在线（2022.6.25） - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
https://www.huachaowang.com/forum.php?mod=viewthread&tid=60496&extra=page%3D1

马黑黑 发表于 2022-8-28 12:20

朵拉发表于 2022-8-28 12:02
马师请教歌词代码是什么，怎么编辑

如果你也lrc歌词（往上一般都能找到），你可以使用我提供的工具进行转换；如果没有，可以手工一句一句制作（开始后通过播放器的暂停按钮获得当前歌词最开始的时间，点向上按钮歌词上屏，依此操作下去直至完成）。

链接：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=60496&extra=page%3D1

醉美水芙蓉 发表于 2022-8-28 13:17

朵拉发表于 2022-8-28 13:35

本帖最后由朵拉于 2022-8-28 17:24 编辑

马黑黑发表于 2022-8-28 12:20
如果你也lrc歌词（往上一般都能找到），你可以使用我提供的工具进行转换；如果没有，可以手工一句一句制 ...
马师，同步歌词学生编辑好了~~

朵拉发表于 2022-8-28 14:22

加林森发表于 2022-8-28 12:15
看看这里：
花潮LRC在线（2022.6.25） - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
https://www ...

森队，歌词如上复制到帖子里木有显示{:4_195:}

小辣椒 发表于 2022-8-28 14:45

欣赏朵拉的精彩制作{:4_178:}

加林森 发表于 2022-8-28 15:17

朵拉发表于 2022-8-28 14:22
森队，歌词如上复制到帖子里木有显示

我看看。

加林森 发表于 2022-8-28 15:20

朵拉发表于 2022-8-28 14:22
森队，歌词如上复制到帖子里木有显示

你是这样的：遥啊遥楚天阔，
我的是这样：let lrcAr = [
['2.24','知我-国风堂 / 哦漏'],你要我与一样的才行。

朵拉发表于 2022-8-28 17:24

本帖最后由朵拉于 2022-8-28 17:26 编辑

加林森发表于 2022-8-28 15:20
你是这样的：遥啊遥楚天阔，
我的是这样：let lrcAr = [
['2.24','知我-国风堂 / 哦漏'], ...
森队，同步歌词学生编辑好了，请指点{:4_190:}

朵拉发表于 2022-8-28 17:26

马黑黑发表于 2022-8-28 12:20
如果你也lrc歌词（往上一般都能找到），你可以使用我提供的工具进行转换；如果没有，可以手工一句一句制 ...

马师，同步歌词学生编辑好了，请指点{:4_190:}

页: [1] 2

花潮论坛's Archiver

星河叹（马黑黑原创）