论坛 › 音乐沙龙 › 蔡文静 - 红黑

马黑黑 发表于 2022-10-3 07:41

蔡文静 - 红黑

<style>
        #papa { left: -214px; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/rb2.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
        #papa::before { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/Pic/2022/time.jpg') no-repeat center/cover; opacity: 0.45; }
        #mplayer { position: absolute; bottom: 0; width: 300px; height: 80px; display: grid; place-items: center; cursor: pointer; }
        #mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
        #mplayer:hover #btnwrap { background: linear-gradient(to top right, hsla(0,0%,50%,.6), hsla(0,100%,40%,.5)); border-radius: 50%; opacity: .75; }
        #btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .7s; }
        #btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border-radius: 6px; opacity: 0; }
        #btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; 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; }
        #prog { --yy: 20px; width: 300px; height: 16px; border-radius: 8px; background: linear-gradient(90deg, hsla(0,0%,0%,.65), hsla(0,100%,50%,.8) 100%, hsla(0,0%,100%,.45) 0); border: 1px solid hsla(0,0%,100%,.45); font: normal 14px / 16px sans-serif; color: hsl(180, 60%,50%); }
        #lrc { --motion: cover1; --tt: 2s; --state: paused; position: absolute; top: 15px; font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,75%,.95)); }
        #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,0%,0%,.95),hsla(0,100%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
        @keyframes cover1 { from { width: 0; } to { width: 100%; } }
        @keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>

<div id="papa">
        <img src="https://638183.freep.cn/638183/t22/hl/fire1.gif" alt="" style="position: absolute; mix-blend-mode: screen;" />
        <div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
        <div id="mplayer">
                <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
                <div id="prog">00:00 | 00:00</div>
        </div>
</div>

<script>
let mKey = 0, mSeek = false, mFlag = true, aud = new Audio();
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.src = 'https://music.163.com/song/media/outer/url?id=1810021934.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, hsla(0,0%,0%,.65), hsla(0,100%,50%,.8) ' + aud.currentTime / aud.duration * 100 + '%, hsla(0,0%,100%,.45) 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr) {if(mKey === j) showLrc(lrcAr);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;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);};
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-10-3 09:57

“火” 字设计的真巧妙。

祝贺和朋友节日快乐！

红影 发表于 2022-10-3 10:04

这个歌词配色真漂亮，还加了~调节歌词逐字同步的节奏。这制作很完美{:4_199:}

马黑黑 发表于 2022-10-3 10:11

梦油 发表于 2022-10-3 09:57
“火” 字设计的真巧妙。

祝贺和朋友节日快乐！

{:4_190:}

马黑黑 发表于 2022-10-3 10:11

红影 发表于 2022-10-3 10:04
这个歌词配色真漂亮，还加了~调节歌词逐字同步的节奏。这制作很完美

刚才要去办事，没有进一步细调，将就点了

相约爱晚亭 发表于 2022-10-3 10:20

欣赏音画佳作！360安全浏览器兼容模式不播放音乐，极速模式正常。我发的《你为谁而来》却正好相反，兼容模式才播放音乐，不知为什么？

红影 发表于 2022-10-3 10:25

马黑黑 发表于 2022-10-3 10:11
刚才要去办事，没有进一步细调，将就点了

已经很漂亮了。背景原来是两张图图拟合的，再加上火字的动图，就是三张图图了呢{:4_204:}

马黑黑 发表于 2022-10-3 11:07

红影 发表于 2022-10-3 10:25
已经很漂亮了。背景原来是两张图图拟合的，再加上火字的动图，就是三张图图了呢

图片采用叠加方式，伪元素的背景设置一点透明

马黑黑 发表于 2022-10-3 11:10

本帖最后由 马黑黑 于 2022-10-3 11:13 编辑

相约爱晚亭 发表于 2022-10-3 10:20
欣赏音画佳作！360安全浏览器兼容模式不播放音乐，极速模式正常。我发的《你为谁而来》却正好相反，兼容模 ...
我这几年编写的代码，统统不考虑IE内核，不兼容一切IE和围绕IE开发的浏览器。我跟你说过，IE是被彻底抛弃了。N年前玩代码时，为了兼容IE，花费了很多力气，后来在一个共享社区看到大佬对IE的预言，认为它很快会消亡（那时IE正如日中天），现在实现了。

红影 发表于 2022-10-3 12:40

马黑黑 发表于 2022-10-3 11:07
图片采用叠加方式，伪元素的背景设置一点透明

这样很不错，就不用为做图折腾了，直接图片叠加，效果也很不错呢{:4_187:}

马黑黑 发表于 2022-10-3 12:41

红影 发表于 2022-10-3 12:40
这样很不错，就不用为做图折腾了，直接图片叠加，效果也很不错呢

也要看看图片能不能叠加，不是所有图片天然都可以叠加的

红影 发表于 2022-10-3 14:34

马黑黑 发表于 2022-10-3 12:41
也要看看图片能不能叠加，不是所有图片天然都可以叠加的

那是当然，必须是互补的，否则会很杂乱{:4_173:}

马黑黑 发表于 2022-10-3 15:39

红影 发表于 2022-10-3 14:34
那是当然，必须是互补的，否则会很杂乱

就像PS的图层理念吧

相约爱晚亭 发表于 2022-10-3 15:56

马黑黑 发表于 2022-10-3 11:10
我这几年编写的代码，统统不考虑IE内核，不兼容一切IE和围绕IE开发的浏览器。我跟你说过，IE是被彻底抛弃 ...

那么怎样才能让音乐在极速模式浏览时能正常播放？

马黑黑 发表于 2022-10-3 16:12

相约爱晚亭 发表于 2022-10-3 15:56
那么怎样才能让音乐在极速模式浏览时能正常播放？

使用HTML5代码，替代以前的旧代码。比如播放器，用下面的HTML标签：

<audio id="myaud" src="MP3地址" loop="loop" autoplay="autoplay"></audio>

相约爱晚亭 发表于 2022-10-3 17:13

马黑黑 发表于 2022-10-3 16:12
使用HTML5代码，替代以前的旧代码。比如播放器，用下面的HTML标签：

谢谢黑黑老师点拨！我曾写过《修复旧帖失效音乐的方法》一文，就是采用更换新播放器代码的方法。现在我都是用HTML5代码播放器插入音乐。奇怪的是：
<!--文章加的音乐：在银色月光下 梦之旅-->
<audio autoplay="autoplay" autostart="true" loop="true"
src="http://up.yinhuabbs.cn/upload/相约爱晚亭/音乐/在银色的月光下.mp3" ></audio>
仍只能在360安全浏览器兼容模式下播放。

马黑黑 发表于 2022-10-3 17:16

本帖最后由 马黑黑 于 2022-10-3 17:17 编辑

相约爱晚亭 发表于 2022-10-3 17:13
谢谢黑黑老师点拨！我曾写过《修复旧帖失效音乐的方法》一文，就是采用更换新播放器代码的方法。现在我都 ...
在 HTML 代码里，autostart="true" loop="true" 这两个值无效，且没有 autostar 属性，应是 autoplay，它们只等于它们自己，只有在 JS 里才用 true 和 false，所以你的代码这两个属性值要修改为：

autoplay="autoplay" loop="loop"

相约爱晚亭 发表于 2022-10-3 17:22

马黑黑 发表于 2022-10-3 17:16
在 HTML 代码里，autostart="true" loop="true" 这两个值无效，且没有 autostar 属性，应是 autoplay，它 ...

谢谢老师指教！今后我就用您给出的播放器代码。

红影 发表于 2022-10-3 17:27

马黑黑 发表于 2022-10-3 15:39
就像PS的图层理念吧

是的，很像，虽然我不会ps{:4_173:}

相约爱晚亭 发表于 2022-10-3 17:27

马黑黑 发表于 2022-10-3 17:16
在 HTML 代码里，autostart="true" loop="true" 这两个值无效，且没有 autostar 属性，应是 autoplay，它 ...

我查看了文章界面搜索栏有红叉，是因安全因素被拦截了，造成不能播放音乐。

查看完整版本: 蔡文静 - 红黑