光芒再现

马黑黑 · 发表于 2022-4-3 15:44

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-4-5 15:13 编辑

Play&Pause

马黑黑 · 发表于 2022-4-3 15:54

这个不自动播放，做法符合当下浏览器大咖们的基于audio的标准。就是说，音频、视频的播放，权限是访客。不知道这样的标准好不好，很复杂的问题。

帖子用到两张图片，一张是背景图，一张是gif飞虫图。CSS动画两个，一个是按钮变前景色，起提示作用，一个是文本仿marquee飞行。音乐用JS加载，宿主是父框。全部代码如下：

<style>
.oml { position: relative; left: -340px; width: 1280px; height: 720px; background: olive url('/data/attachment/forum/202204/03/154038rpwvwvzvvdrvx2bp.jpg') no-repeat center/cover; font: 1em / 30px Sans-serif; color: #aaa; text-shadow: 1px 1px 1px #666; opacity: .85;}
.oml::before { content:''; position: absolute; width: 100%; height: 365px; background: url('/data/attachment/forum/202204/03/154038ppjf8hsz7h4fjfms.gif') repeat-x; }
.oml::after { content: attr(data-t); position: absolute; width: 250px; left: 160px; bottom: 15px; animation: fly 20s linear infinite alternate; }
.btn { position: absolute; width: 120px; height: 30px; left: 10px; bottom: 15px; text-align: center; background: #666; border-radius: 8px; cursor: pointer; opacity: .8; animation: color 1s ease infinite; }
@keyframes fly { to { left: 1000px; } }
@keyframes color { to { color: gold; } }
</style>
<div class="oml" data-t="Linkin Park - One More Light">
<div class="btn">Play&Pause</div>
</div>
<script>
let canplay = true;
let btn = document.querySelector('.btn');
let oml = document.querySelector('.oml');
let aud = document.createElement('audio');
aud.src = "https://music.163.com/song/media/outer/url?id=1330980201.mp3";
aud.loop = true;
document.querySelector('.oml').appendChild(aud);
btn.onclick = function() {
canplay ? (aud.play(), this.style.animationPlayState='paused', canplay = false) : (aud.pause(), this.style.animationPlayState = 'running', canplay = true);
}
</script>