茉莉花
本帖最后由 马黑黑 于 2023-4-6 08:18 编辑 <br /><br /><style>#papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t23/1/485.jpeg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#lrc { position: absolute; left: 50%; top: 20px; transform: translate(-50%); height: 50px; font: bold 40px/50px sans-serif; background: transparent; color: gray; display: grid; place-items: center start; pointer-events: none;--motion: cover2; --state: running; --tt: 1s; }
#lrc::before, #lrc::after { position: absolute; content: ''; }
#lrc::before { content: attr(data-lrc); width: 0%; height: 100%; color: green; white-space: pre; overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); }
#lrc::after { width: 100px; height: 100px; left: -100px; border-radius: 50%; background: url('https://638183.freep.cn/638183/t23/btn/meihua.png') center/cover no-repeat; cursor: pointer; pointer-events: auto; animation: rot 4s infinite linear var(--state); }
@keyframes cover1 { to { width: 100%; } }
@keyframes cover2 { to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2013109760" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let mKey = 0, mFlag = true;
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('timeupdate', () => {for(let j = 0; j < lrcAr.length; j ++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
lrc.onclick = () => aud.paused ? aud.play() :aud.pause();
})();
</script>
测试：单标签实现播放控制、lrc歌词同步全部功能。参考代码：
<style>
#papa { margin: auto; width: 1024px; height: 640px; background: lightblue url('485.jpeg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#lrc { position: absolute; left: 50%; top: 20px; transform: translate(-50%); height: 50px; font: bold 40px/50px sans-serif; background: transparent; color: gray; display: grid; place-items: center start; pointer-events: none;--motion: cover2; --state: running; --tt: 1s; }
#lrc::before, #lrc::after { position: absolute; content: ''; }
#lrc::before { content: attr(data-lrc); width: 0%; height: 100%; color: green; white-space: pre; overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); }
#lrc::after { width: 100px; height: 100px; left: -100px; border-radius: 50%; background: url('https://638183.freep.cn/638183/t23/btn/meihua.png') center/cover no-repeat; cursor: pointer; pointer-events: auto; animation: rot 4s infinite linear var(--state); }
@keyframes cover1 { to { width: 100%; } }
@keyframes cover2 { to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2013109760" autoplay="autoplay" loop="loop"></audio>
<script>
let mKey = 0, mFlag = true;
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('timeupdate', () => {for(let j = 0; j < lrcAr.length; j ++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
lrc.onclick = () => aud.paused ? aud.play() :aud.pause();
</script>
“单标签实现播放控制、lrc歌词同步全部功能。”
这个好，可以让歌词直接停留在暂停的字上面了，记得之前的歌词能暂停，但是当前句还是走完的。{:4_187:} 黑黑越弄越完美了{:4_199:} 歌曲是茉莉花，播放器按钮明明是桃花呀{:4_172:} 不知道有奖励，争取把奖励拿完再走。就是这么财迷{:4_205:} 当中一人不是普通话发音，有点像吴越地区的发音方式呢。 还有奖励，黑黑这是放了多少奖励啊{:4_196:} 好一朵美丽的茉莉花——单标签实现播放控制、lrc歌词同步全部功能测试作品。 梦油 发表于 2023-4-6 09:18
好一朵美丽的茉莉花——单标签实现播放控制、lrc歌词同步全部功能测试作品。
感谢支持 红影 发表于 2023-4-6 08:50
“单标签实现播放控制、lrc歌词同步全部功能。”
这个好，可以让歌词直接停留在暂停的字上面了，记得之前 ...
那是早前的，后来的歌词同步都会暂停的了 红影 发表于 2023-4-6 08:50
黑黑越弄越完美了
这是不算完美，只是测试一下单标签做完所有的事，但要控制进度之类的，单标签还是做不完的，还需要其他标签来做。 红影 发表于 2023-4-6 08:51
歌曲是茉莉花，播放器按钮明明是桃花呀
我做了一个茉莉花的图片，感觉不太理想，就没用上。茉莉花的样子好像不合适做按钮。 红影 发表于 2023-4-6 08:51
不知道有奖励，争取把奖励拿完再走。就是这么财迷
见钱眼开好正常，见钱爪子忍不住也好正常 红影 发表于 2023-4-6 08:56
当中一人不是普通话发音，有点像吴越地区的发音方式呢。
反正这歌有点特别的 红影 发表于 2023-4-6 08:56
还有奖励，黑黑这是放了多少奖励啊
上面说清楚的吧？反正钱也是你发的，我只是转发{:4_170:} 马黑黑 发表于 2023-4-6 12:13
感谢支持
别客气、别客气。 马黑黑 发表于 2023-4-6 12:14
那是早前的，后来的歌词同步都会暂停的了
那我好像用得都不对，去找了最早的做了{:4_173:} 马黑黑 发表于 2023-4-6 12:15
这是不算完美，只是测试一下单标签做完所有的事，但要控制进度之类的，单标签还是做不完的，还需要其他标 ...
其实多点标签也没什么啊{:4_173:} 马黑黑 发表于 2023-4-6 12:16
我做了一个茉莉花的图片，感觉不太理想，就没用上。茉莉花的样子好像不合适做按钮。
挺好的，至少很漂亮啊。