uniapp 微信小程序使用video 播放mp3、wav、flac等音频文件报错 MEDIA_ERR

这篇具有很好参考价值的文章主要介绍了uniapp 微信小程序使用video 播放mp3、wav、flac等音频文件报错 MEDIA_ERR_DECODE(-11103,11010001)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

官方解释是解码发生了错误，当是我对音频文件进行转码后并未解决这个问题，但是我想到解决方案是使用audio 标签，但是样式又非常丑自能选择自己写，然后又出现个问题audio标签获取不了播放音频总时长，差点没缓过气来。。。最后苦思冥想到了解决方案，使用video标签获取播放音频时长audio标签播放音频，最终还是解决了。

代码实现

HTML

这里使用ui组件是uview组件库

进度条组件 u-slider 操作播放进度

	<view class="audio_box" v-for="(item,index) in detail.audio" :key="index">
						<view class="title_top">
							<view>景区指南</view>
							<view style="font-size: 24rpx;font-weight: 400;">
								<text style="font-size: 24rpx;font-weight: 400;">真人讲解</text>
								<text style="color: #EBEBEB;margin: 0 16rpx;">|</text>
								<text>随用随听</text>
							</view>
						</view>
						<view style="margin-top: 40rpx;">
							<video class="hidden" :src="item.url" :id="`myVideo${index}`"
								@loadedmetadata="(evet)=>loadedmetadata(evet,index)"
								></video> 
							<audio :id="`myAudio${index}`" @timeupdate="(evet)=>timeupdate(evet,index)" class="hidden" :src="item.url"></audio>
							
							<u-slider v-model="audioArray[index].sliderValue" active-color="#00CCB1"
								@start="onSlide('start',index)" @end="onSlide('end',index)"></u-slider>
							<view class="progress_time_box">
								<text>{{audioArray[index].payTime || '00:00'}}</text>
								<text v-if="audioArray[index].finalTime">{{audioArray[index].finalTime}}</text>
								<u-loadmore v-else :icon="true" :loadText="{loading:'加载中',loadmore:'加载中'}" />
							</view>
							<view style="text-align: center;" @click="()=> onPlayAudio(index)">
								<image v-if="audioArray[index].playSwitchIcon" class="pay_button"
									src="../../static/images/annualCard_img/start_icon@2x.png" />
								<image v-else class="pay_button"
									src="../../static/images/annualCard_img/end_icon@2x.png" />
							</view>
						</view>
					</view>

JS

转换播放时间为秒

function calcTimer(timer) { // 将毫秒转换为时间格式
		if (timer === 0 || typeof timer !== 'number') return '00:00';
		let mm = Math.floor(timer / 60);
		let ss = Math.floor(timer % 60);
		if (mm < 10) mm = '0' + mm;
		if (ss < 10) ss = '0' + ss;
		return mm + ':' + ss;
	}

1.获取文件播放总时长

loadedmetadata(evet, index) { // 立即获取音频时间
				const str = calcTimer(evet.detail.duration);
				this.audioArray[index] = {
					duration: evet.detail.duration,//播放时间总时长
					finalTime: str,//播放时间总时长(展示时间)
					playSwitchIcon: false,//切换播放音频图片
					sliderValue: 0//播放音频进度条
				};
				console.log(this.audioArray,'this.audioArray')
				this.$forceUpdate();
			}

2.点击播放

onPlayAudio(index) { // 点击开始播放
                //由于我这个是遍历出来需要获取下标来确认每个标签 可以仔细查看HTML片段
				const { pause, play } = uni.createAudioContext(`myAudio${index}`)
				this.audioArray[index].playSwitchIcon ? pause() : play(); //开始播放 和 暂停播放
				this.audioArray[index].playSwitchIcon = !this.audioArray[index].playSwitchIcon; //切换播放图标
				this.$forceUpdate()
			},

3.开始播放音频

timeupdate(evet, index) { // 播放开始了
				const current = evet.detail.currentTime,
					str = calcTimer(current),
					result = (Math.round(Math.floor(current) / Math.floor(evet.detail.duration) * 10000) / 100);//转换播放时间为秒
				this.audioArray[index].sliderValue = Number(result) || 0;//更新当前进度条时间
				this.audioArray[index].payTime = str; //更新当前播放音频时间
				this.$forceUpdate();
				if (str === this.audioArray[index].finalTime) {
					// 播放时间和获取的时间相等了就自动关闭
					this.audioArray[index].playSwitchIcon = false;
				}
			}

4.滑动进度条组件，调整播放进度

onSlide(type, index) { // 滑动调整播放时间
				const { pause, play, seek } = uni.createAudioContext(`myAudio${index}`);
				if (type === 'start') {
					pause(); //滑动开始暂停
					this.audioArray[index].playSwitchIcon = false;
				} else {
					seek(this.audioArray[index].sliderValue / 100 * this.audioArray[index].duration); // 总时长除以现在的进度
					play(); //滑动结束后播放
					this.audioArray[index].playSwitchIcon = true;
				}
			}

写的一般还请有大佬指点一二文章来源地址https://www.toymoban.com/news/detail-768830.html

到了这里，关于uniapp 微信小程序使用video 播放mp3、wav、flac等音频文件报错 MEDIA_ERR_DECODE(-11103,11010001)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！