uniapp打包小程序使用uni.createInnerAudioContext() 安卓机拿到的时长为0,解决方案

该方法的主要思路是，进页面先执行播放操作，将音量置为0，然后拿到时长，结束播放，然后关闭播放, 将音量置为1.但是原文的方法我不能用（不知道为什么），但是原文的主要思路是没有问题。

xtcyolo

540人浏览 · 2023-07-26 11:50:11

xtcyolo · 2023-07-26 11:50:11 发布

参考原文https://blog.csdn.net/wujize/article/details/107074331?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169033479716800226572736%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=169033479716800226572736&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-107074331-null-null.142^v91^insert_down28v1,239^v3^control&utm_term=createInnerAudioContext%E5%AE%89%E5%8D%93&spm=1018.2226.3001.4187https://blog.csdn.net/wujize/article/details/107074331?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169033479716800226572736%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=169033479716800226572736&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-107074331-null-null.142^v91^insert_down28v1,239^v3^control&utm_term=createInnerAudioContext%E5%AE%89%E5%8D%93&spm=1018.2226.3001.4187

原文思路：

该方法的主要思路是，进页面先执行播放操作，将音量置为0，然后拿到时长，结束播放，然后关闭播放, 将音量置为1.

但是原文的方法我不能用（不知道为什么），但是原文的主要思路是没有问题

我自己是后端返回流，然后我用const fs = uni.getFileSystemManager()+fs.writeFile(）来写入形成一个本地的地址进行播放，代码如下，解决问题关键代码是onCanplay()函数，

目前是实现进入就直接播放，没有像原文一样停止（加停止就拿不到时长，不知道为什么）

我是使用的音频插件

https://ext.dcloud.net.cn/plugin?id=3372https://ext.dcloud.net.cn/plugin?id=3372

使用代码

	<free-audio startPic="http://140.246.126.10:9004/enclosures/play.png" endPic="http://140.246.126.10:9004/enclosures/stop.png" audioId="audio1" :url="path"></free-audio>

组件代码如下

<template>
	<!-- 音频播放器组件 -->
	<view v-if="path" class="flex justify-between align-center audio">
		<!-- <template v-if="getTime(Math.round(duration)) != '00:00'"> -->
		<template>
			<view class="mr-3" @click="start(audioId)">
				<image :src="startPic" class="icon" v-show="!status"></image>
				<image :src="endPic" class="icon" v-show="status"></image>
			</view>
			<view class="ml-3">{{ getTime(Math.round(currentTime)) }}</view>
			<view class="flex-1">
				<slider @change="changeAudio" :activeColor="activeColor" :min="0" :max="duration.toFixed(0)" block-size="16" :value="currentTime.toFixed(0)" :step="0.1"></slider>
			</view>
			<view class="ml-3">{{ getTime(Math.round(duration)) }}</view>
		</template>
		<!-- <u-loading-icon v-else></u-loading-icon> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			context: null,
			currentTime: 0,
			duration: 0,
			status: false,
			intervalLoadDuration: null //定时器
		};
	},
	props: {
		url: String,
		activeColor: {
			type: String,
			default: '#0E7EFC'
		},
		startPic: String,
		endPic: String,
		audioId: [String, Number]
	},
	created() {
		// this.init();
	},
	computed: {
		// 音频播放地址
		path() {
			console.log(this.url);
			return this.url;
		}
	},
	watch: {
		// 第一次传过来的地址不能播放，我用来请求后端的数据流，可以忽略
		path: {
			immediate: true,
			handler(val) {
				if (val !== '') {
					this.init();
				}
			}
		}
	},
	methods: {
		init() {
			this.context = uni.createInnerAudioContext();
			this.context.src = this.path;
			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;
				}
			});
		},
		start(id) {
			//点击播放
			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() {
			uni.showLoading({
				title: '加载中...'
			});
			// 微信开发者工具转换的地址是http开头，真机是wxfile开头
			if (this.path.startsWith('http') || this.path.startsWith('wxfile')) {
				this.context.play(); //直接播放
				this.status = true; //控制播放按钮，变为暂停按钮
			}
			if (this.intervalLoadDuration) {
				return;
			}
			this.intervalLoadDuration = setInterval(() => {
				if (this.context.duration) {
					this.duration = this.context.duration;
					uni.hideLoading();
					clearInterval(this.intervalLoadDuration);
				}
			}, 100);
		},
		onTimeUpdate() {
			//音频播放进度
			this.context.onTimeUpdate(() => {
				if (!Number.isFinite(this.context.duration)) {
					this.duration = this.context.currentTime + 10;
					this.currentTime = this.context.currentTime;
				} else {
					this.duration = this.context.duration;
					this.currentTime = this.context.currentTime;
				}
			});
		},
		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: #f4f8fb;
	/* padding: 15rpx; */
	height: 150rpx;
	position: relative;
}

.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; */
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #656565;
}

.mr-3 {
	position: absolute;
	bottom: -60rpx;
	left: 50%;
	transform: translateX(-50%);
	/* margin-right: 30rpx; */
}
</style>