inner-audio.uvue

<template>
	<view class="uni-padding-wrap">
		<page-head title="audio"></page-head>
		<view class="uni-common-mt">
			<slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>
		</view>
		<!-- <view class="uni-common-mt play-time-area">
			<text class="current-time">{{currentTime}}</text>
			<text class="duration">{{duration}}</text>
		</view>
		<view class="play-button-area">
			<image class="icon-play" :src="playImage" @click="play"></image>
		</view> -->
    <button type="primary" @click="play" class="uni-btn">播放</button>
    <button type="primary" @click="pause" class="uni-btn">暂停</button>
    <button type="primary" @click="stop" class="uni-btn">停止</button>
    <button type="primary" @click="onchange('seek')" class="uni-btn">跳转到指定位置</button>
    <button type="primary" @click="setAutoplay" class="uni-btn">是否自动开始播放</button>
    <button type="primary" @click="setLoop" class="uni-btn">是否循环播放</button>
    <view class="uni-title">
      <text class="uni-title-text">格式/路径示例</text>
    </View>
    <navigator url="/pages/API/inner-audio/inner-audio-format" class="uni-btn">
      <button type="primary" @click="pause">音频格式示例</button>
    </navigator>
    <navigator url="/pages/API/inner-audio/inner-audio-path" class="uni-btn">
      <button type="primary" @click="pause">音频路径示例</button>
    </navigator>
	</view>
</template>
<script lang="uts">
	const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
	export default {
		data() {
			return {
				title: "innerAudioContext",
				isPlaying: false,
				isPlayEnd: false,
				currentTime: 0,
				duration: 100,
        pos:10,
        paused:false,
        _isChanging:false,
        _audioContext: null as InnerAudioContext | null
			}
		},
		computed: {
			position() {
				return this.isPlayEnd ? 0 : this.currentTime;
			},
			playImage() {
				return this.isPlaying ? "/static/pause.png" : "/static/play.png"
			}
		},
    onReady() {
      this._audioContext = uni.createInnerAudioContext();
      this._audioContext!.src = audioUrl;
      this.onCanplay()
    },
		onUnload() {
			if (this._audioContext != null && this.isPlaying) {
				this.stop();
        this._audioContext!.destroy()
			}
		},
		methods: {
      setAutoplay(){
        this._audioContext!.autoplay = !this._audioContext!.autoplay;
        console.log(this._audioContext!.autoplay,'autoplay');
      },
      setLoop(){
        this._audioContext!.loop = !this._audioContext!.loop;
        console.log(this._audioContext!.loop,'loop');
      },
      onchanging() {
      	this._isChanging = true;
      },
      onSeeking(){
        this._audioContext!.onSeeking(() => {
          console.log('音频进行 seek 操作事件');
        });
      },
      onSeeked(){
        this._audioContext!.onSeeked(() => {
          console.log('音频完成 seek 操作事件');
        });
      },
      onchange(e) {
        let pos = e == 'seek' ? 20 : e.detail.value
      	this._audioContext!.seek(pos);
        this.onSeeking()
        this.onSeeked()
      	this._isChanging = false;
      },
      onCanplay(){
        this._audioContext!.onCanplay(() => {
          console.log('音频进入可以播放状态事件');
        });
      },
      onTimeUpdate(){
        this._audioContext!.onTimeUpdate((e) => {
          // console.log('onTimeUpdate:音频播放进度更新事件',e);
        	if (this._isChanging === true) {
        		return;
        	}
        	this.currentTime = this._audioContext!.currentTime || 0;
        	this.duration = this._audioContext!.duration || 0;
        });
      },
      onPlay(){
        this._audioContext!.onPlay(() => {
        	console.log('开始播放');
        });
      },
      onEnded(){
        this._audioContext!.onEnded(() => {
          console.log('播放结束');
        	this.currentTime = 0;
        	this.isPlaying = false;
        	this.isPlayEnd = true;
        });
      },
      onError(){
        this._audioContext!.onError((err) => {
          console.log('err',err);
        	this.isPlaying = false;
        });
      },
      onWaiting(){
        this._audioContext!.onWaiting(() => {
          console.log('音频加载中事件');
        });
      },
			play() {
				// if (this.isPlaying) {
				// 	this.pause();
				// 	return;
				// }
				this.isPlaying = true;
				this._audioContext!.play();
        this.isPlayEnd = false;
        this.onPlay()
        this.onWaiting()
        this.onTimeUpdate()
        this.onError()
        this.onEnded()
			},
      onPause(){
        this._audioContext!.onPause(() => {
          console.log('音频暂停事件');
        });
      },
			pause() {
				this._audioContext!.pause();
        this.onPause()
				this.isPlaying = false;
			},
      onStop(){
        this._audioContext!.onStop(() => {
          console.log('音频停止事件');
        });
      },
			stop() {
				this._audioContext!.stop();
        this.onStop()
				this.isPlaying = false;
			}
		}
	}
</script>
<style>
	.play-time-area {
		display: flex;
		flex-direction: row;
		margin-top: 20px;
	}

	.duration {
		margin-left: auto;
	}

	.play-button-area {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 50px 0;
	}

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