当前位置：首页 > news >正文

uniapp音乐播放createInnerAudioContext

news 来源：原创 2025/6/13 20:33:05

利用uniapp的api createInnerAudioContext音乐播放

1.html部分

<template><view style="padding: 30vh 20% 0 20%;" class="flex-space-center"><view @click="handleDo('stop')" v-if="status != 'stop'">结束</view><view @click="handleDo('play')" v-if="status =='stop'">开始</view><view @click="handleDo('pause')" v-if="status == 'play' || status =='resum'">暂停</view><view @click="handleDo('resum')" v-if="status == 'pause'">继续</view><view :class="{play:isPlay,pause:isPause}"style="display: inline-block;height: 40rpx;width: 40rpx;background: red;" @click="handleImg">5</view></view>
</template>

2.script部分

<script>const innerAudioContext = uni.createInnerAudioContext();export default {components: {},data() {return {isPause: false,isPlay: false,status: 'stop', //stop 结束  play播放  pause暂停  resum继续bgmusic: '',src_bgmusic: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'}},onLoad(options) {this.init(options)},onHide() {//注意：uni.navigateBack到下一个页面时，音乐会继续播放，所以我们要在这里设置一下暂停if (this.bgmusic) {this.voice_pause()}},onShow() {// 从下一个返回到这个页面时继续if (this.bgmusic) {this.audioResum()}},onUnload() {// 页面销毁时暂停音乐this.voice_stop()},onReady() {},methods: {init(options) {// 自然播放结束事件innerAudioContext.onEnded(() => {this.audioPaly()})// 模拟接口请求背景音乐---setTimeout(() => {this.bgmusic = this.src_bgmusic;}, 0)},// 播放audioPaly() {this.isPause = falsethis.isPlay = trueinnerAudioContext.src = this.bgmusicinnerAudioContext.play()this.status = 'play'},// 继续audioResum() {this.isPause = falsethis.isPlay = trueinnerAudioContext.play()this.status = 'resum'},// 暂停audioPause() {this.isPause = true;this.isPlay = false;innerAudioContext.pause()this.status = 'pause'},// 结束audioStop() {this.isPause = truethis.isPlay = false;innerAudioContext.stop()this.status = 'stop'},// 操作handleDo(status) {switch (status) {case 'stop':this.audioStop()break;case 'play':this.audioPaly()break;case 'pause':this.audioPause()break;case 'resum':this.audioResum()break;}},// 点击旋转handleImg() {switch (this.status) {case 'play':this.audioPause()break;case 'pause':this.audioResum()break;case 'resum':this.audioPause()break;case 'stop':this.audioPaly()break;}}}}
</script>

style部分

<style lang="scss" scoped>.play {animation: rotate 3s linear infinite;}.pause {animation-play-state: paused;}@keyframes rotate {to {transform: rotate(360deg);}}
</style>