Promise处理音频自动播放实例
位置:
首页 >
代码集锦[ 发布时间: 2024.2.26 作者: 马黑 阅读: 137 ]
效果：
代码：
<style>
#mydiv {
margin: 20px auto;
width: 720px;
height: 360px;
border: 1px solid gray;
position: relative;
}
#player {
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
animation: rot 5s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/12/13/8bbd28a68e37df522563ce652bf0bae6.mp3"></audio>
<img id="player" src="https://638183.freep.cn/638183/small/hxxb.png" alt="" />
</div>
<script>
var flashId; //setTimeout定时器运行ID: 用于音频不允许自动播放时
//联动函数 : 与音频播放暂停同步联动 - 关键帧动画、播放器提示语
mState = () => {
aud.paused
? (mydiv.style.setProperty('--state','paused'), player.title = '点击播放')
: (mydiv.style.setProperty('--state','running'), player.title = '点击暂停')
;
};
//flash函数 : 音频禁止自动播放是调用 - 播放器变大变小，引导访问者点击
flash = () => {
let idx = Math.round(Math.random());
let val = [0.8,1][idx];
player.style.transform = `scale(${val})`;
//setTimeout定时器递归调用此函数
flashId = setTimeout(flash,300);
};
//aud.play事件Promise链式处理
aud.play().then(() => {
mState(); //音频正常自动播放 : 运行联动函数
}).catch(err => { //俘获错误
if (err.name === "NotAllowedError") {
flash(); //禁止自动播放时运行flash函数
} else {
alert(err); //音频加载出错时显示错误信息
}
mState(); //即便不能播放也要运行联动函数
});
//下面是两个audio控件监听事件
aud.addEventListener('pause', mState);
aud.addEventListener('playing', mState);
//播放按钮点击事件
player.onclick = () => {
//如果 flashID 活跃中（不能自动播放时会被赋值）
if(flashId) {
flashId = clearTimeout(flashId); //销毁它
//复原播放器的transform 属性让道给animation）
player.style.transform = 'unset';
}
//按钮自己本分活儿 : 音频播放时停放、暂停时播放
aud.paused ? aud.play() : aud.pause();
}
</script>
前一篇: 叶瓣效果
下一篇: 用canvas画布制作首尾衔接图片
