60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<!-- <button @click="playAudio">播放AAC音频</button>
|
||
|
|
<button @click="pauseAudio">暂停</button>
|
||
|
|
<button @click="stopAudio">停止</button>
|
||
|
|
<text>当前状态: {{ statusText }}</text> -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
audioContext: null,
|
||
|
|
statusText: '未播放'
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// 创建音频实例
|
||
|
|
this.audioContext = uni.createInnerAudioContext();
|
||
|
|
// 设置音频源，这里以 static 目录下的本地文件为例
|
||
|
|
this.audioContext.src = '/static/audio/sound.aac';
|
||
|
|
|
||
|
|
// 监听各种事件
|
||
|
|
this.audioContext.onPlay(() => {
|
||
|
|
this.statusText = '播放中';
|
||
|
|
});
|
||
|
|
this.audioContext.onPause(() => {
|
||
|
|
this.statusText = '已暂停';
|
||
|
|
});
|
||
|
|
this.audioContext.onStop(() => {
|
||
|
|
this.statusText = '已停止';
|
||
|
|
});
|
||
|
|
this.audioContext.onEnded(() => {
|
||
|
|
this.statusText = '播放结束';
|
||
|
|
});
|
||
|
|
this.audioContext.onError((res) => {
|
||
|
|
this.statusText = '播放错误';
|
||
|
|
console.error('音频播放错误:', res);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
playAudio() {
|
||
|
|
this.audioContext.play();
|
||
|
|
},
|
||
|
|
pauseAudio() {
|
||
|
|
this.audioContext.pause();
|
||
|
|
},
|
||
|
|
stopAudio() {
|
||
|
|
this.audioContext.stop(); // 停止会重置进度到开头
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
// 页面销毁时，销毁音频实例以释放资源
|
||
|
|
if (this.audioContext) {
|
||
|
|
this.audioContext.destroy();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|