javascript - 手机锁时可以触发播放音频吗

Question

我正在制作一个网络聊天应用程序，现在我需要在新消息到达时播放通知声音。

首先我使用 howler.js播放声音。在 howler 中，我们可以开始播放声音，然后如果我们锁定屏幕或更改浏览器选项卡焦点，它就会继续播放。 但是如果标签页打开并且移动屏幕被锁定，它不会开始播放声音；如果用户位于另一个标签页且打开另一个标签页上的应用程序，它也不会播放声音。

所以基本上我的问题是，即使屏幕锁定也可以开始播放声音，或者当用户位于另一个选项卡上时开始播放声音吗？

app.js

var notify_sound = new Howl({
    src: ['./assets/sounds/notify2.mp3'],
    volume: 1.0
});
.
.
.
.
.
.
.
.
if(type == "user"){
        if(userAddress == remoteAddress) {
            typing.html('').fadeOut('fast');
            messages.append('<li class="self"><p class="message">'+ obj.message + '</p><p class="time">' + time +'</p></li><p class="username_self">' + userAddress + '</p>');
        }
        else {
            typing.html('').fadeOut('fast');
            messages.append('<li class="other"><p class="message">'+ obj.message + '</p><p class="time">' + time +'</p></li><p class="username_other">' + userAddress + '</p>');

            notify_sound.play();
        }
    }

Answer 1

HTML5 音频和移动设备并不能很好地相处。 Howler.js(如果您使用的是 2.0)使用一种解决方法，通过将事件处理程序附加到将触发播放的第一个触摸事件来使音频完全“自动播放”。如果 View 未处于事件状态，则不会有触摸事件(即使是模拟事件)来触发播放。

来自文档:

Mobile Playback

By default, audio on iOS, Android, etc is locked until a sound is played within a user interaction, and then it plays normally the rest of the page session (Apple documentation). The default behavior of howler.js is to attempt to silently unlock audio playback by playing an empty buffer on the first touchend event. This behavior can be disabled by calling:

Howler.mobileAutoEnable = false;

如果没有初始交互，您就无能为力。