EveryLike/pages/API/create-inner-audio-context/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="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="formats" v-for="(item,index) in notSupportFormats" :key="index">
				<text class="uni-subtitle-text">{{ item.format + (item.support) }}</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
		support: string | null
		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: 'wav',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav'
					},
          {
            format:"m3u8",
            src:'https://qiniu-web-assets.dcloud.net.cn/audio/sample/m3u8/ForElise.m3u8'
          }
				] as Array<AudioFormat>,
				notSupportFormats: [
					{
						format: 'ogg',
						support: '(iOS 不支持)',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.ogg'
					},
					{
						format: 'wma',
						support: '(iOS/Android/web/Harmony 不支持)',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wma'
					},
					{
						format: 'aiff',
						support: '(Android/web/Harmony 不支持)',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff'
					},
					{
						format: 'caf',
						support: '(Android/web/Harmony 不支持)',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf'
					},
          {
            format:"dash",
            support: '(iOS 不支持)',
            src:'https://qiniu-web-assets.dcloud.net.cn/audio/sample/dash/ForElise.mpd'
          },
					{
						format: '错误格式',
						support: '(iOS/Android/web/Harmony 不支持)',
						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wmaa'
					},
				] as Array<AudioFormat>
			}
		},
		onReady() {
			this._audioContext = uni.createInnerAudioContext();
			this._audioContext!.onPlay(() => {
				console.log('开始播放');
			});
			this._audioContext!.onPause(() => {
				console.log('播放暂停');
			})
			this._audioContext!.onEnded(() => {
				console.log('播放结束');
				this.isPlaying = false;
			});
			this._audioContext!.onError((err) => {
				this.isPlaying = false;
				console.log('err', err);
			});
		},
		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;
			},
		},
	}
</script>

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

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