<template>
<!-- 音频播放器组件 -->
<view class='flex justify-between align-center audio' >
<view class='mr-3' @click='start(audioId)'>
<image src='./static/play.png' class='icon' v-show='!status'></image>
<image src='./static/stop.png' class='icon' v-show='status'></image>
</view>
<view class='flex-1'>
<slider @change='changeAudio' :activeColor='activeColor' :min='0' :max='duration.toFixed(0)' :value='currentTime.toFixed(0)' :step='0.1'></slider>
</view>
<view class='ml-3'>{{getTime(Math.round(currentTime))}}</view>
</view>
</template>
<script>
export default {
data() {
return {
context: null,
currentTime: 0,
duration: 100,
status: false
}
},
props: {
url: String,
activeColor: {
type: String,
default: '#0E7EFC'
},
startPic: String,
endPic: String,
audioId: [String,Number]
},
created() {
this.context = uni.createInnerAudioContext();
this.context.src = 'https://wordocr.maoln.com/uploads/20211112/636d781a233d6d48940a99fe7a8f0710.wav';
this.onTimeUpdate();
this.onCanplay();
this.onEnded();
uni.$on('stop',(id)=> {
if(id && id != this.audioId) {
this.context.stop();
this.status = false;
} else if(!id){
this.context.stop();
this.status = false;
}
})
this.context.onError(err =>{
console.log(err)
})
},
methods: {
start(id) { //点击播放
console.log('点击')
let audioId = id;
if(this.status) {
this.context.pause();
this.status = !this.status;
}else {
uni.$emit('stop',id)
this.context.play()
this.status = !this.status;
}
},
onCanplay() { //进入可播放状态
this.context.onCanplay(() => {
console.log('可播放')
this.context.duration;
setTimeout(()=>{
this.duration = this.context.duration;
},1000)
})
},
onTimeUpdate() { //音频播放进度
this.context.onTimeUpdate(() => {
if (!Number.isFinite( this.context.duration)) {
this.context.currentTime = Number.MAX_SAFE_INTEGER;
this.context.currentTime = 0;
} else {
this.duration = this.context.duration;
this.currentTime = this.context.currentTime;
}
console.log(this.context.duratio)
})
},
onEnded() { //播放结束
this.context.onEnded(()=> {
this.status = false;
this.currentTime = 0;
})
},
changeAudio(e) {
let paused = this.context.paused;
this.context.pause();
this.context.seek(e.detail.value)
if(!paused) {
this.context.play();
}
},
getTime(time) {
let m = parseInt(time / 60);
let s = time % 60;
return this.towNum(m) + ':' + this.towNum(s);
},
towNum(num) {
if(num >= 10) {
return num;
}else {
return '0' + num;
}
}
}
}
</script>
<style>
.audio {
background: #F4F4F4;
padding: 20rpx;
}
.icon {
width: 80rpx;
height: 80rpx;
}
.flex {
display: flex;
flex-direction: row;
}
.justify-between {
justify-content: between;
}
.align-center {
align-items: center;
}
.flex-1 {
flex: 1;
}
.ml-3 {
margin-left: 30rpx;
}
.mr-3 {
margin-right: 30rpx;
}
</style>
- 发布:2021-11-23 14:45
- 更新:2024-07-18 17:22
- 阅读:1075
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 3.2.16
手机系统: Android
手机系统版本号: Android 7.1.1
手机厂商: 模拟器
手机机型: 模拟器
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
直接设置src为wav格式的网络连接,无法播放
直接设置src为wav格式的网络连接,无法播放
预期结果:
预期可以正常播放
预期可以正常播放
实际结果:
实际无法播放
实际无法播放
bug描述:
安卓模式下 使用 uni.createInnerAudioContext() 播放wav格式音频,报错 -99,音频为网络连接,大小 22 Mb,{
"errMsg": "MediaError",
"errCode": -99
}
如果你这个音频文件又短,体积又大,可能是采样率过高了,使用ffmpeg调整转换率到44100即可
ffmpeg.exe -i onChecking.mp3 -ar 44100 onChecking44100.mp3
ffmpeg.exe -i onLongWaiting.mp3 -ar 44100 onLongWaiting44100.mp3
ffmpeg.exe -i onCheckFinish.mp3 -ar 44100 onCheckFinish44100.mp3
ffmpeg.exe -i onConnect.mp3 -ar 44100 onConnect44100.mp3
ffmpeg.exe -i newMsg.mp3 -ar 44100 newMsg44100.mp3
1***@qq.com (作者)
请问有结果了吗?该问题遇到不止一次了
2021-11-24 16:30