3***@qq.com
3***@qq.com
  • 发布:2020-10-30 10:16
  • 更新:2022-06-27 20:37
  • 阅读:2159

uni.createInnerAudioContext() 播放音频正常结束时,不触发onEnded事件

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 2.9.3

浏览器平台: Chrome

浏览器版本: 86.0.4240.111

项目创建方式: HBuilderX

App下载地址或H5⽹址: http://localhost:8080/#/pages/index/index?id=4

示例代码:

<style lang="scss" scoped>
.content {
position: relative;
width: 100%;
height: 500upx;

    &-bg {  
        position: absolute;  
        left: 0;  
        top: 0;  
        width: 100%;  
        height: 100%;  
        z-index: 2;  
    }  

    &-view {  
        position: absolute;  
        left: 0;  
        top: 0;  
        width: 100%;  
        height: 500upx;  
        z-index: 22;  
        padding: 80upx 60upx 50upx;  
        box-sizing: border-box;  
        text-align: center;  
        color: #fff;  

        &-title {  
            font-size: 40upx;  
            font-weight: 600;  
            margin-bottom: 30upx;  
        }  

        &-author {  
            font-size: 26upx;  
            margin-bottom: 60upx;  
        }  

        &-slider {  
            margin-bottom: 40upx;  
            padding: 0 40upx;  
            display: flex;  
            justify-content: flex-start;  
            align-items: center;  
            &-left{  
                width: 90%;  
            }  
            &-right{  
                width: 10%;  
            }  
        }  

        &-operationBoard {  
            display: flex;  
            justify-content: center;  
            align-items: center;  

            &-img {  
                width: 70upx;  
                height: 60upx;  
                margin-right: 90upx;  
            }  

            &-img:nth-child(3) {  
                margin-right: 0;  
            }  
        }  
    }  
}  

.flex {  
    font-size: 26upx;  
    padding: 20upx;  
    height: calc(100vh - 530upx);  
    overflow-y: auto;  

    &-list {  
        display: flex;  
        justify-content: flex-start;  
        align-items: center;  
        border-bottom: 1px solid #efefef;  
        padding: 10upx 0;  

        &-num {  
            width: 10%;  
        }  

        &-name {  
            width: 80%;  
            text-align: left;  
            color: #666;  

            &-title {  
                font-size: 28upx;  
                font-weight: 600;  
                color: #333;  
                margin-bottom: 10upx;  
            }  
        }  

        &-icon {  
            width: 10%;  

            &-img {  
                width: 40upx;  
                height: 40upx;  
            }  
        }  
    }  
}  

</style>
<template>
<view class="box">
<view class="content">
<image class="content-bg" src="/static/bg.png"></image>
<view class="content-view">
<view class="content-view-title">《{{current.name}}》</view>
<view class="content-view-author">歌手: {{current.author}}</view>
<view class="content-view-slider">
<view class="content-view-slider-left">
<slider :value="progress" activeColor="#C52E2E" backgroundColor="#fff" block-color="#C52E2E"
block-size="10" />
</view>
<view class="content-view-slider-right">
{{progressTime}}
</view>
</view>
<view class="content-view-operationBoard">
<image class='content-view-operationBoard-img' @click="autoPlay(-1)" src="../../static/i_1.png" mode=""></image>
<image class='content-view-operationBoard-img' @click="isParse()" src="../../static/i_2.png" mode=""></image>
<image class='content-view-operationBoard-img' @click="autoPlay(1)" src="../../static/i_3.png" mode=""></image>
</view>
<!-- <audio :src="current.src" :name="current.name" :author="current.author" :action="audioAction" controls @play='play()'></audio> -->
</view>
</view>
<scroll-view scroll-y class="flex">
<view class="flex-list" v-for="(item,index) in audioList" :key='item.id' @click="playAaudio(item.id,index)">
<view class="flex-list-num">{{item.id}}</view>
<view class="flex-list-name">
<view class="flex-list-name-title">{{item.name}}</view>
<view class="flex-list-name-author">歌手: {{item.author}}</view>
</view>
<view class="flex-list-icon">
<image class="flex-list-icon-img" src="../../static/i_2.png" mode="" v-if="active === index"></image>
<image class="flex-list-icon-img" src="../../static/i_4.png" mode="" v-else></image>
</view>
</view>
</scroll-view>
</view>

</template>

<script>
import { formatSeconds } from '../../utils/util.js'
export default {
data() {
return {
erCodeId:1,// 二维码传递ID
progressTime:'00:00',
progress:0, //播放进度
active: 0,
audioAction: {
method: 'pause'
},
current: {},
audioList: [{
src: '../../audio/a_1.mp3',
name: '你是我内心的一首歌',
author: '王力宏',
isPlay: false,
id: 1
},
{
src: '../../audio/a_2.mp3',
name: '重庆时间',
author: '重庆孩子乐队',
isPlay: false,
id: 2
},
{
src: '../../audio/a_3.mp3',
name: '成都',
author: '赵雷',
isPlay: false,
id: 3
},
{
src: '../../audio/a_4.mp3',
name: '广东爱情故事',
author: '广东雨神',
isPlay: false,
id: 4
},
{
src: '../../audio/a_5.mp3',
name: '苏州情书',
author: '韩雪',
isPlay: false,
id: 5
},
{
src: '../../audio/a_6.mp3',
name: '你不在南京',
author: '南游记乐队',
id: 6
},
{
src: '../../audio/a_7.mp3',
name: '欢喜侬',
author: '顶楼的马戏团',
isPlay: false,
id: 7
},
{
src: '../../audio/a_8.mp3',
name: '太原后生谝山西',
author: '田野',
isPlay: false,
id: 8
},
{
src: '../../audio/a_9.mp3',
name: '这里是宁波',
author: '冯圣雅',
isPlay: false,
id: 9
},
{
src: '../../audio/a_10.mp3',
name: '话说老沈阳',
author: '朱晓红',
id: 10
},
{
src: '../../audio/a_11.mp3',
name: '长春',
author: '李玉刚',
isPlay: false,
id: 11
},
{
src: '../../audio/a_12.mp3',
name: '北京北京',
author: '王峰',
isPlay: false,
id: 12
}
],
interval: 0,
innerAudioContext: null, // 音频对象
isPlay: true
}
},
onLoad({id}) {
this.innerAudioContext = uni.createInnerAudioContext();
this.erCodeId = id ? Number(id) : 1;
this.playAaudio(this.erCodeId,this.audioList.findIndex(ele=>ele.id===this.erCodeId))
},

    methods: {  
        //  上一首 下一首  
        autoPlay(type) {  
            // 如果点击过快,则不执行操作  
            let timer = Date.parse(new Date());  
            if (timer - this.interval < 500) return;  
            this.interval = timer;  
            // type >  0 --> 下一首   
            if (type > 0) {  
                if (this.active === 11) {  
                    this.playAaudio(this.audioList[0].id, 0)  
                } else {  
                    this.playAaudio(this.audioList[this.active + 1].id, this.active + 1)  
                }  
            } else {  
                if (this.active === 0) {  
                    this.playAaudio(this.audioList[11].id, 11)  
                } else {  
                    this.playAaudio(this.audioList[this.active - 1].id, this.active - 1)  
                }  
            }  
        },  
        // 暂停和继续播放  
        isParse() {  
            // 如果点击过快,则不执行操作  
            let timer = Date.parse(new Date());  
            if (timer - this.interval < 500) return;  
            if(!this.current.src){  
                this.playAaudio(this.erCodeId,this.audioList.findIndex(ele=>ele.id===this.erCodeId))  
            }  
            // 播放中,暂停  
            if (this.isPlay) {  
                this.innerAudioContext.pause();  
            } else {  
                this.innerAudioContext.play();  
            }  
            this.isPlay = !this.isPlay;  
        },  
        playAaudio(id, index = 0) {  

            // 如果是当前播放歌曲,重复点击无效  
            if(index === this.active) return;  
            this.current = this.audioList.filter(ele => ele.id === id)[0];  
            this.active = index;  

            if (this.innerAudioContext) {  
                this.innerAudioContext.destroy();  
            }  
            this.innerAudioContext = uni.createInnerAudioContext();  
            this.innerAudioContext.autoplay = true;  
            uni.showLoading({  
                title:'缓冲中...'  
            })  
            // 每次播放 更新进度条  
            this.progressTime = '00:00';  
            this.progress = 0;  
            // 自动播放  
            this.innerAudioContext.src = `http://47.96.229.18:8083/audio/a_${id}.mp3`;  
            this.innerAudioContext.onPlay(() => {  
                uni.hideLoading();  
                console.log('开始播放');  
            });  
            //  音频加载中  
            this.innerAudioContext.onWaiting = (() => {  
                console.log('加载中')  
                uni.showToast({  
                    title: '网络有点不给力,全力加载中...',  
                    icon: 'none',  
                    duration: 1500  
                })  
            })  
            // 音频播放进度  
            this.innerAudioContext.onTimeUpdate(() => {  
                this.progress = Math.floor(this.innerAudioContext.currentTime / this.innerAudioContext.duration * 100);  
                this.progressTime =  formatSeconds(this.innerAudioContext.currentTime);  
                })  
            // 如果播放完成,自动播放下一首  
            this.innerAudioContext.onEnded = (() => {  
                console.log('播放完毕.切换下一首')  
                this.autoPlay(1)  
            })  
            this.innerAudioContext.onError = ((err) => {  
                console.log(err, '')  
            })  
            // 音频准备就绪  
            this.innerAudioContext.onCanplay = (()=>{  

                console.log('准备就绪');  
            })  

        }  
    }  
}  

</script>

操作步骤:

播放音频正常结束时,不触发onEnded事件

预期结果:

自动播放一下首歌曲

实际结果:

播放完了之后,事件无触发.无后续变动

bug描述:

uni.createInnerAudioContext() 播放音频正常结束时,不触发onEnded事件

2020-10-30 10:16 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

我的是异步传入音频地址还没播放就又执行了onEnded方法

DCloud_UNI_Anne

DCloud_UNI_Anne

该问题目前已经被锁定, 无法添加新回复