javascript - 有没有办法在网络应用程序中以编程方式播放音频？

Question

我正在构建一个网络应用程序，其中涉及在新订单进入应用程序时播放声音。在桌面上这一切都工作正常。

但是，在 iOS 上，音频根本无法播放。经过一些investigation我发现 iOS 在播放音频方面有限制。

• 仅在用户交互之后
• 仅当页面处于事件状态且位于前台时
• 仅当手机屏幕打开时
• 无法阻止屏幕关闭，因此您的音频将在第一首歌曲后停止。

有没有办法请求用户许可以允许以编程方式播放音频？

Answer 1

是的，这是真的!用户请求之前没有音频缓冲区。 使用一些弹出窗口或任何美观的动画来吸引用户点击。 您初始化播放，同时下一个代码行暂停，您将初始缓冲，然后您可以播放音频可编程性。 (就像老版本的自动播放问题一样)

在我的内存中... Android 和 iOS 没有相同的行为，它与我们可以使用此技巧启动缓冲区的最大音频数量有关(单击或触摸)。您需要对其进行测试。我的设备是 android 6，适用于 iOS 3 视频/音频。

如果您希望相同的音频在同一时刻播放多次: 最好使用相同的源创建更多音频 html 标签。

I 'm a fan of javascript but this time it is better to have html audio tags in html form (subjective feeling/ no proof).

    var EXE_JUST_ONE_TIME = false;

    document.addEventListener("touchstart" , function(e) {

    if (EXE_JUST_ONE_TIME == false){

     EXE_JUST_ONE_TIME = true;

     document.getElementById("LaserShot").play(); // need for play pause just for buffering start
     document.getElementById("LaserShot").pause();
     // now you can play programmability from js 
     document.getElementById("LaserShot_CLONE").play();
     document.getElementById("LaserShot_CLONE").pause();

    }
    else if(EXE_JUST_ONE_TIME = true){

     document.getElementById("MakeReadyotherAudio1").play();
     document.getElementById("MakeReadyotherAudio1").pause();

     document.getElementById("MakeReadyotherAudio2").play();
     document.getElementById("MakeReadyotherAudio2").pause();

     EXE_JUST_ONE_TIME = 'NOMORE'

   } 


    }