<template>
	<page-head :title="title"></page-head>
	<view class="uni-padding-wrap uni-common-mt">
		<view class="uni-title">
			<text class="uni-title-text">多音频同时播放</text>
		</view>
		<button type="primary" @tap="play1()"  class="uni-btn"> 播放/停止(进度：{{currentTime1}})</button>
		<button type="primary" @tap="play2()"  class="uni-btn"> 播放/停止(进度：{{currentTime2}})</button>
	</view>
</template>

<script>
	type AudioPath = {
		description : string
		src : string
	}
	export default {
		data() {
			return {
				title: "多音频同时播放",
				_audioContext1: null as InnerAudioContext | null,
				src: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
				_audioContext2: null as InnerAudioContext | null,
				playing1: false,
				playing2: false,
				currentTime1: 0,
				currentTime2: 0,
			}
		},
		onReady() {
			this._audioContext1 = uni.createInnerAudioContext();
			this._audioContext1!.src = this.src
			this._audioContext1!.onTimeUpdate((res) => {
				this.currentTime1 = this._audioContext1!.currentTime;
			})
			this._audioContext2 = uni.createInnerAudioContext();
			this._audioContext2!.src = this.src
			this._audioContext2!.onTimeUpdate((res) => {
				this.currentTime2 = this._audioContext2!.currentTime;
			})
		},

		onUnload() {
			if (this._audioContext1 != null) {
				this._audioContext1!.stop()
				this._audioContext1!.destroy()
			}
			if (this._audioContext2 != null) {
				this._audioContext2!.stop()
				this._audioContext2!.destroy()
			}
		},
		methods: {
			play1() {
				if (this._audioContext1 != null) {
					this.currentTime1=0
					if (this.playing1) {
						this._audioContext1!.stop()
					} else {
						this._audioContext1!.play()
					}

				}
				this.playing1 = !this.playing1
			},
			play2() {
				if (this._audioContext2 != null) {
					this.currentTime2=0
					if (this.playing2) {
						this._audioContext2!.stop()
					} else {
						this._audioContext2!.play()
					}

				}
				this.playing2 = !this.playing2
			}
		}
	}
</script>

<style>
	.formats {
		align-items: center;
	}

	.icon-play {
		width: 60px;
		height: 60px;
		margin: 10px;
	}
</style>