inner-audio-format.uvue

<template>
	<page-head :title="title"></page-head>
	<!-- #ifdef APP -->
	<scroll-view style="flex: 1;">
	<!-- #endif -->
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title">
				<text class="uni-title-text">支持的音频格式示例</text>
			</view>

			<view class="formats" v-for="(item,index) in supportFormats" :key="index">
				<text class="uni-subtitle-text">{{item.format}}</text>
				<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
					@click="play(item.src,index)"></image>
			</view>

			<view class="uni-title">
				<text class="uni-title-text">不支持的音频格式</text>
			</view>
			<view class="formats" v-for="(item,index) in notSupportFormats" :key="index">
				<text class="uni-subtitle-text">{{item.format}}</text>
				<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
					@click="play(item.src,index)"></image>
			</view>

		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	type AudioFormat = {
		format : string
		src : string
	}
	export default {
		data() {
			return {
				title: 'audio-format',
				playIndex: 0,
				isPlaying: false,
				_audioContext: null as InnerAudioContext | null,
				supportFormats: [
					{
						format: 'mp3',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
					},
					{
						format: 'mp4',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp4'
					},
					{
						format: 'm4a',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.m4a'
					},
					{
						format: 'aac',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aac'
					},
					{
						format: 'flac',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.flac'
					},

					{
						format: 'ogg',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.ogg'
					},
					{
						format: 'wav',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav'
					},
				] as Array<AudioFormat>,
				notSupportFormats: [
					{
						format: 'wma',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wma'
					},
					{
						format: 'aiff',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff'
					},
					{
						format: 'caf',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf'
					},
					{
						format: '错误格式',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wmaa'
					},
				] as Array<AudioFormat>
			}
		},
		onReady() {
			this._audioContext = uni.createInnerAudioContext();
		},
		onUnload() {
			if (this._audioContext != null) {
				this.pause();
				this._audioContext!.destroy()
			}
		},
		methods: {
			pause() {
				this._audioContext!.pause();
				this.isPlaying = false;
			},
			play(audioUrl : string, index : number) {
				// console.log(index,audioUrl);
				if (this.isPlaying && this.playIndex == index) {
					this.pause();
					return;
				}
				this.playIndex = index
				this._audioContext!.src = audioUrl;
				this._audioContext!.play();
				this.isPlaying = true;
				this._audioContext!.onPlay(() => {
					console.log('开始播放');
				});
				this._audioContext!.onEnded(() => {
					console.log('播放结束');
					this.isPlaying = false;
				});
				this._audioContext!.onError((err) => {
					this.isPlaying = false;
					console.log('err', err);
				});
			},
		},
	}
</script>

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

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