Promise处理音频自动播放实例

马黑黑

效果：

代码：

<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>

马黑黑

audio.play().then( () => { ... }).catch(err => { ... });

上面一行的结构，就是Promise的链式运行方式。audio.play() 会返回一个 Promise 信息，如果成功播放，则（then）做点什么，否则，俘获（catch）错误，err 是我们定义的装载错误信息的容器变量。就这么简单。

俘获错误代码块有两个分支，一个是浏览器禁止自动播放，若此，我们就让播放按钮搞点动作（flash函数），以吸引访问者的注意，从而可能去点击它；另一个是音频播放方面出现的错误，可能是音频资源有问题或是格式不对、网络太慢无法下载等等等，具体是什么由 err 变量去说吧，会是一两行英文。

南无月

占楼

南无月

不播放的时候这个小花还会放大小缩小闪烁提示。。。十分友好啊。。
播放的时候小花保持大小不变了。。

不过这次鼠标怎么划拉小花都在。

红影

也就是说，无论是否设置了音频自动播放，都油路可走了呢

红影

设置不允许自动播放会得到提示，如果可以播放，那就一切太平

红影

无论成功还是失败，都能有个说法，这样真好

马黑黑

醉美水芙蓉 发表于 2024-2-26 18:24
黑黑老师晚上好！老师制作辛苦了！

马黑黑

红影 发表于 2024-2-26 18:59
无论成功还是失败，都能有个说法，这样真好

我们之前用的实现方法其实也挺好，唯一没做的只是一个出错检测机制，可以酱紫：

aud.onerror = () => 做点什么;

马黑黑

红影 发表于 2024-2-26 18:50
设置不允许自动播放会得到提示，如果可以播放，那就一切太平

你要知道，大多数权限是有浏览器的使用者设置的，而绝大多数人不会去设置浏览器，所以，专业的播放机制应该考虑到。

马黑黑

红影 发表于 2024-2-26 18:48
也就是说，无论是否设置了音频自动播放，都油路可走了呢

油有木有去问问 @梦油 先生，盐我知道木有

马黑黑

南无月 发表于 2024-2-26 18:28
不播放的时候这个小花还会放大小缩小闪烁提示。。。十分友好啊。。
播放的时候小花保持大小不变了。。

这叫花常在

红影

马黑黑 发表于 2024-2-26 19:32
我们之前用的实现方法其实也挺好，唯一没做的只是一个出错检测机制，可以酱紫：

aud.onerror = () =>  ...

嗯嗯，这样就更完美了

马黑黑

红影 发表于 2024-2-26 19:37
嗯嗯，这样就更完美了

我有个别帖子会用到

红影

马黑黑 发表于 2024-2-26 19:34
你要知道，大多数权限是有浏览器的使用者设置的，而绝大多数人不会去设置浏览器，所以，专业的播放机制应 ...

黑黑说得太对了，以前我就不懂设置，新到手的电脑通常没法自动播放呢

红影

马黑黑 发表于 2024-2-26 19:34
油有木有去问问 @梦油 先生，盐我知道木有

有路可走，不是油路，打错字了

马黑黑

红影 发表于 2024-2-26 19:39
黑黑说得太对了，以前我就不懂设置，新到手的电脑通常没法自动播放呢

不过设置不是个问题

马黑黑

红影 发表于 2024-2-26 19:40
有路可走，不是油路，打错字了

油路其实也挺好，走得快

红影

马黑黑 发表于 2024-2-26 19:41
油路其实也挺好，走得快

不用走，直接滑就行了呗