uni-app IOS-APP中 audio 组件的 onPlay 事件会重复执行

uni-app IOS-APP中 audio 组件的 onPlay 事件会重复执行

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win 10
HBuilderX 正式
HBuilderX版本号 3.99
手机系统 iOS
手机版本号 iOS 16
手机厂商 苹果
手机机型 iPhone X
页面类型 vue
Vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
    <view>  

    </view>  
</template>  

<script>  
    var audio = uni.createInnerAudioContext();  
    audio.sessionCategory = 'ambient';  
    var str = 1;  
    export default {  
        data() {  
            return {  
                tempindex: 0,  
            }  
        },  
        onReady() {  
            this.eventAudio();  
            setTimeout(() => {  
                audio.src = 'https://peiyin.wozhiyi.com/tmp/20240407/0aaa572a0b563ad6b5870735f9f2a600.mp3';  
                audio.play();  
            }, 1000)  
        },  
        methods: {  
            eventAudio() {  
                audio.onPlay(() => {  
                    console.log('onPlay', this.tempindex);  
                    this.tempindex++;  
                })  
            }  
        }  
    }  
</script>

操作步骤：

  • 在app中运行页面

预期结果：

  • 只执行一次

实际结果：

  • 执行两次

bug描述：

  • 页面准备完成监听音频事件，onPlay会重复执行


更多关于uni-app IOS-APP中 audio 组件的 onPlay 事件会重复执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

你这不是play了两次么

更多关于uni-app IOS-APP中 audio 组件的 onPlay 事件会重复执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


刚刚测试了相同环境下的audio并未复现，更新至HBX最新版试试

在 Uni-App 中，如果您在 iOS 平台使用 audio 组件时遇到 onPlay 事件重复执行的问题，可能是由于 iOS 系统对音频播放的处理机制与安卓系统不同，或者 Uni-App 框架在处理 audio 组件时存在一些兼容性问题。

可能的原因和解决方案

  1. iOS 的音频播放机制 iOS 在处理音频播放时，可能会多次触发 play 事件，尤其是在音频资源加载、缓冲或播放状态变化时。这可能导致 onPlay 事件被多次触发。

  2. Uni-App 的兼容性问题 Uni-App 在某些版本中可能存在对 audio 组件的事件处理不够完善的问题，尤其是在 iOS 平台上。

解决方案

  1. 防抖处理 可以通过防抖（debounce）的方式来减少 onPlay 事件的触发频率。例如，使用 setTimeout 来延迟处理 onPlay 事件，确保在一定时间内只执行一次。

    let timer = null;

function handlePlay() {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(() => {
        // 实际的处理逻辑
        console.log('Audio is playing');
    }, 300); // 设置一个合适的延迟时间，例如 300ms
}

// 绑定到 audio 组件的 onPlay 事件上
this.$refs.audio.onPlay = handlePlay;

  2. 使用 onCanplay 或 onLoadedmetadata 事件 如果您不需要在 play 事件中执行特定的逻辑，可以尝试使用 onCanplay 或 onLoadedmetadata 事件来代替 onPlay 事件。这些事件通常只会在音频资源加载完成后触发一次。

    <audio ref="audio" src="your-audio-file.mp3" [@canplay](/user/canplay)="handleCanPlay"></audio>

    function handleCanPlay() {
    console.log('Audio is ready to play');
    // 在这里执行您的逻辑
}

  3. 检查 Uni-App 版本 确保您使用的是 Uni-App 的最新版本。Uni-App 团队可能会在后续版本中修复此类兼容性问题。

  4. 手动控制播放状态 在播放音频时，手动控制音频组件的播放状态，避免在 onPlay 事件中重复触发播放操作。

    let isPlaying = false;

function handlePlay() {
    if (!isPlaying) {
        isPlaying = true;
        // 执行播放逻辑
        console.log('Audio is playing');
    }
}

function handlePause() {
    isPlaying = false;
}

// 绑定到 audio 组件的 onPlay 和 onPause 事件上
this.$refs.audio.onPlay = handlePlay;
this.$refs.audio.onPause = handlePause;
回到顶部