利用createInnerAudioContext()播放音频，解决了结束后自动暂停，重播从头开始，获取播放时间

<template>
	<view class="audio-page">
		<view class="box-left">
			<image class="box-img" :src="image" mode="aspectFill"></image>
			<view class="page-btn" @tap="clickAudio">
				<image :src="music_play?stop_img:start_img" mode="widthFix"></image>
			</view>
		</view>
		<view class="box-content">
			<!-- <view class="content-name">{{title}}</view> -->
			<view class="progress">
				<text>{{getMinuteTime(now_time)}}</text>
				<slider :value="now_time/total_time*100" block-size="10" block-color="#FF3333" activeColor="#FF3333"
					@change="sliderChange.stop"></slider>
				<text>{{getMinuteTime(total_time)}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "WZS-Audio",
		props: ['music', 'image', 'title', 'autoplay'],
		data() {
			return {
				music_play: false,
				AUDIO: '',
				total_time: '',
				now_time: 0,
				timeupdata: '',
				interval: '',
				start_img: '../../static/icons/icon-play.png',
				stop_img: '../../static/icons/icon-stop.png'
			};
		},
		created() {
			this.playAudio()
			this.playAudioCallBack()
		},
		computed: {
			//计算进度条的位置
			getSlider() {
				return function() {
					if(this.now_time === this.total_time){
						console.log('结束了');
						return 0
					} else {
						let silderLen = (this.now_time * 100) / this.total_time
						return silderLen
					}
					
				}
			},
			// 秒转换分秒
			getMinuteTime() {
				return function(data) {
					let minute = parseInt(data / 60)
					let second = parseInt(data % 60)
					if (minute.toString().length == 1) minute = `0${minute}`
					if (second.toString().length == 1) second = `0${second}`
					return `${minute}:${second}`
				}
			},
		},
		methods: {
			// 播放音乐
			playAudio() {
				var that = this
				this.AUDIO = uni.createInnerAudioContext()
				this.AUDIO.src = this.music
				// 监听音频进入可以播放状态的事件
				this.AUDIO.onCanplay(() => {
					// // 必须。可以当做是初始化时长
					this.AUDIO.duration;
					// // 必须。不然也获取不到时长
					setTimeout(() => {
						this.total_time = Math.round(this.AUDIO.duration)
						console.log('音频时长', this.total_time)
					}, 1000)

				})
				console.log('是否自动播放', this.autoplay);
				if (this.autoplay) {
					this.AUDIO.autoplay = true
					this.AUDIO.play()
					this.music_play = true
				}
				// this.timeupdata = setInterval(() => {
				// 	//console.log((this.now_time / this.total_time) * 100)
				// 	if (this.music_play) {
				// 		this.now_time++

				// 		if (this.now_time >= this.total_time) {
				// 			console.log('当前时间', this.getMinuteTime(this.now_time), this.getMinuteTime(this
				// 				.total_time))
				// 			this.music_play = false
				// 			this.now_time = 0
				// 		}
				// 	}
				// }, 1000)

				

			},
			//音频播放事件的回调
			playAudioCallBack() {
				let _self = this
				this.AUDIO.onPlay(() => {
					if (_self.AUDIO.duration === 0 || isNaN(_self.AUDIO.duration)) {
						console.log('this.AUDIO.onPlay=====更新时间========')
						setTimeout(() => {
							_self.total_time = Math.round(_self.AUDIO.duration)
						}, 1000)
					}
				})
				// 监听播放时间 及 计算播放进度
				this.AUDIO.onTimeUpdate(() => {
				// 	//播放时间
					_self.now_time = _self.AUDIO.currentTime
					if(_self.now_time >= _self.total_time){
						_self.now_time = 0
					}
				})
				// 继续播放seek完成
				this.AUDIO.onSeeked((res) => {
					//跳转到进度条的位置
					_self.AUDIO.play()
					_self.music_play = true
				})
				//自然播放结束
				this.AUDIO.onEnded(function(res) {
					console.log('已经结束了');
					_self.AUDIO.pause()
					_self.music_play = false
				 
				})
				//音频错误
				this.AUDIO.onError((res) => {
					uni.showToast({
						title: res.errMsg,
						icon: 'none',
						mask: true
					})
					console.log(res.errMsg);
					console.log(res.errCode);
				});

			},
			clickAudio() {
				// this.$emit('change-play-state', this.music_play)
				if (this.music_play) {
					console.log('暂停音乐');
					this.music_play = false
					this.AUDIO.pause()
				} else {
					console.log('播放音乐');
					this.music_play = true
					this.AUDIO.play()
				}
			},
			// 拖动进度条
			sliderChange(e) {
				console.log('拖动进度条', e)
				const second = (e.detail.value / 100) * this.total_time
				console.log(second, '拖动进度条111', second)
				this.AUDIO.seek(second)
				this.now_time = second
				console.log(this.now_time, this.total_time)
				console.log('拖动进度条222', this.getMinuteTime(this.now_time))
			},
			destroyed() {
				console.log("destroyed----->")
				this.music_play = false
				this.AUDIO.pause()
				this.AUDIO.offTimeUpdate()
				this.AUDIO.offSeeked()
				this.AUDIO.offError()
				clearInterval(this.timeupdata)
			}
		},
		destroyed() {
			this.destroyed()
		}
	}
</script>

<style lang="scss">
	.audio-page {
		width: 100%;
		height: 80upx;
		padding-top: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		// box-shadow: 3upx 3upx 6upx #ccc;
		.box-left {
			width: 10%;
			position: relative;
			display: flex;

			.box-img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}

			.page-btn {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 10rpx;
				top: 0;
				z-index: 3;

				image {
					width: 50upx;
					height: 50upx;
					background-color: rgba($color: #000000, $alpha: 0.3);
					border-radius: 50%;
				}
			}
		}

		.box-content {
			width: 90%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 30upx;
			box-sizing: border-box;
			font-size: 24upx;

			.content-name {
				width: 100%;
				display: -webkit-box;
				/* 弹性盒模型 */
				-webkit-box-orient: vertical;
				/* 元素垂直居中*/
				-webkit-line-clamp: 1;
				/*  文字显示的行数*/
				overflow: hidden;
				/* 超出隐藏 */
			}

			.progress {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-size: 0.86rem;
					color: #666;
				}

				slider {
					width: 80%;
				}
			}
		}
	}
</style>

最后

以上就是虚拟芝麻为你收集整理的利用createInnerAudioContext()播放音频，解决了结束后自动暂停，重播从头开始，获取播放时间的全部内容，希望文章能够帮你解决利用createInnerAudioContext()播放音频，解决了结束后自动暂停，重播从头开始，获取播放时间所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。