详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

相关学习推荐：微信小程序开发
原由
同样的是因为小程序官方不维护audio组件了
音频组件的要求与限制
1、点击播放或者暂停
2、显示播放进度及总时长
3、通过图标变化显示当前音频所处状态（暂停/播放/加载中）
4、页面音频更新时刷新组件状态
5、全局有且只有一个音频处于播放状态
6、离开页面之后要自动停止播放并销毁音频实例
材料/属性/方法
让我们开始吧
uni-app vue同样的先构造dom结构
<view class="custom-audio"> <image v-if="audiosrc !== undefined && audiosrc !== null && audiosrc !== ''" @click="playorstopaudio" :src="audioimg" class="audio-btn" /> <text v-else @click="tips" class="audio-btn">无音源</text> <text>{{ fmtsecond(currenttime) }}/{{ fmtsecond(duration) }}</text></view>复制代码定义接受的组件
props: { audiosrc: { type: string, default: '' },},复制代码定义customaudio组件的初始化相关的操作，并给inneraudiocontext的回调添加一些行为（之前taro那篇我们踩过的坑这里就直接上代码了）
import { formatsecondtohhmmss, afteraudioplay, beforeaudiorecordorplay } from '../../lib/utils'const iconpaused = '../../static/images/icon_paused.png'const iconplaying = '../../static/images/icon_playing.png'const iconstop = '../../static/images/icon_stop.png'const iconloading = '../../static/images/icon_loading.gif'// ...data() { return { audioctx: null, // 音频上下文 duration: 0, // 音频总时长 currenttime: 0, // 音频当前播放的时长 audioimg: iconloading, // 默认状态为加载中 }},watch: { audiosrc: { handler(newsrc, oldsrc) { console.log('watch', newsrc, oldsrc) this.audioimg = iconloading this.currenttime = 0 this.duration = 0 if (this.audioctx === undefined) { this.audioctx = uni.createinneraudiocontext() this.ontimeupdate = this.audioctx.ontimeupdate this.bindauidocallback(this.audioctx) } else { this.audioctx.src = newsrc } if (this.audioctx.play) { this.audioctx.stop() getapp().globaldata.audioplaying = false } } }},mounted() { this.audioctx = uni.createinneraudiocontext() this.audioctx.src = this.audiosrc this.audioctx.starttime = 0 this.bindauidocallback(this.audioctx)},methods: { bindauidocallback(ctx) { ctx.ontimeupdate((e) => { this.ontimeupdate(e) }) ctx.oncanplay((e) => { this.oncanplay(e) }) ctx.onwaiting((e) => { this.onwaiting(e) }) ctx.onplay((e) => { this.onplay(e) }) ctx.onpause((e) => { this.onpause(e) }) ctx.onended((e) => { this.onended(e) }) ctx.onerror((e) => { this.onerror(e) }) }, tips(){ uni.showtoast({ title: '无效音源,请先录音', icon: 'none' }) }, playorstopaudio() { if (this.audioctx === null) { this.audioctx = uni.createinneraudiocontext() this.audioctx.src = this.audiosrc this.bindauidocallback(this.audioctx) } if (this.audioctx.paused) { if (beforeaudiorecordorplay('play')) { this.audioctx.play() this.audioimg = iconplaying } } else { this.audioctx.pause() afteraudioplay() this.audioimg = iconpaused } }, ontimeupdate(e) { console.log('ontimeupdate', this.audioctx.duration, this.audioctx.currenttime) if (this.audioctx.currenttime > 0 && this.audioctx.currenttime <= 1) { this.currenttime = 1 } else if (this.currenttime !== math.floor(this.audioctx.currenttime)) { this.currenttime = math.floor(this.audioctx.currenttime) } const duration = math.floor(this.audioctx.duration) if (this.duration !== duration) { this.duration = duration } }, oncanplay(e) { if (this.audioimg === iconloading) { this.audioimg = iconpaused } console.log('oncanplay', e) }, onwaiting(e) { if (this.audioimg !== iconloading) { this.audioimg = iconloading } }, onplay(e) { console.log('onplay', e, this.audioctx.duration) this.audioimg = iconplaying if (this.audioctx.duration > 0 && this.audioctx.duration <= 1) {

网站访问速度突然变慢后台卡顿
这是原来的站点打开正常-虚拟主机/数据库问题
云服务器安装虚拟机镜像文件
锋云服务器配置
硬件Raid 还是软件Raid，到底选择哪一个？
京东与五星电器合作 全面展开无界零售
江苏双线云服务器租用
如何使用服务器