一个前端攻城狮的快应用开发之路——Audio的完全方案

本文详述了一位前端开发者在快应用中处理Audio组件的挑战,包括切歌、播放状态同步、跨页面播放状态管理和全局播放器的实现。针对这些问题,提出了具体的解决方案,如利用生命周期事件和全局状态管理来确保音频播放的顺畅和一致性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文作者:XiaoTian

本文章共分3期发出,这是最后一篇啦,后面还有更多作者的分享,欢迎大家持续关注哦~

 

一、场景

 

笔者参与开发的是一款音乐类的快应用产品,自然就需要用到audio的组件和相关api,之前在H5中已经做过音频播放的相关功能,这次开发快应用以为可以复用大部分代码,结果发现还是有些不同。除此之外,有一些H5做不到或者效果不好的功能希望能在快应用上实现,例如跨页播放状态同步、全局无刷新小播放器等等。

 

二、Audio的问题及解决方案

 

(1)切歌

 

在H5中,可以直接使用audio.play()来切歌,但是在快应用中切歌需要先audio.pause(),并且不能audio.pause()后直接播放新歌曲,需要在onpause的监听中,确保已被暂停后,再开始播放新的歌曲(赋值新的歌曲src)。

 

 

640?wx_fmt=other

 

 

(2)播放状态和图标显示的同步

 

首先需

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值