如题,在h5中语音播放结束后报错,console.log打印错误信息显示undefined,且再次执行play没有反应,
以下是代码:
<template>
<view>
<template v-if="canPlay">
<template v-if="playing">
<wd-button @click="pause">暂停</wd-button>
</template>
<template v-else>
<wd-button @click="play">播放</wd-button>
</template>
</template>
</view>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue'
const props = defineProps({
src: {
type: String,
required: true,
},
})
let innerAudioContext = uni.createInnerAudioContext()
const canPlay = ref(false)
const playing = ref(false)
onMounted(() => {
innerAudioContext.onPlay(() => {
console.log('fm-audio 开始播放')
playing.value = true
})
innerAudioContext.onPause(() => {
console.log('fm-audio 暂停播放')
playing.value = false
})
innerAudioContext.onStop(() => {
console.log('fm-audio 停止播放')
playing.value = false
})
innerAudioContext.onEnded(() => {
console.log('fm-audio 播放结束')
playing.value = false
})
innerAudioContext.onError((res) => {
console.log('fm-audio 播放异常')
console.log(res)
playing.value = false
})
innerAudioContext.onCanplay((res) => {
console.log('fm-audio onCanplay')
console.log(res)
canPlay.value = true
})
initPlayer()
})
onUnmounted(() => {
console.log('fm-audio onUnmounted')
if (innerAudioContext) {
try {
innerAudioContext.pause()
innerAudioContext.destroy()
innerAudioContext = null
} catch (e) {
// TODO handle the exception
}
}
})
watch(
() => props.src,
(res) => {
console.log(res)
},
)
function initPlayer() {
innerAudioContext.src = props.src
innerAudioContext.autoplay = false
innerAudioContext.loop = true
}
function play() {
if (innerAudioContext) {
innerAudioContext.play()
}
}
function pause() {
if (innerAudioContext) {
innerAudioContext.pause()
}
}
function stop() {
if (innerAudioContext) {
innerAudioContext.stop()
}
}
</script>
<style lang="scss" scoped></style>
1 个回复
草稚 (作者)
语音文件是远程的.aac文件