如何使用带有 Javascript 的 Android 版 Chrome 播放声音通知？

Posted 2023-03-05

【中文标题】如何使用带有 Javascript 的 Android 版 Chrome 播放声音通知？

【英文标题】：How to play a sound notification with Chrome for Android with Javascript?

【发布时间】：2017-03-18 21:32:44

【问题描述】：

播放 MP3

var popsound = new Audio('http://gget.it/u1urz3zh/popsound.mp3');
popsound.load();
popsound.play();

不适用于 android 版 Chrome。根据this link，这是一个功能，不允许以这种方式播放，即没有明确的用户输入。

我知道这是故意这样做的（主要是为用户节省移动数据），但是如何让网站播放通知声音？肯定有办法播放通知声音（通知在手机上很流行），怎么做？

---

如果不可能，至少，如何（使用 JS）知道是否允许或不允许浏览器使用.play() 播放声音？（然后可以显示是否声音通知在网站上是否可用）

---

上下文：我正在创建一个web chat service，那么如果我无法在 Android 版 Chrome 中使用.play()，如何在发布消息后播放声音通知？

【参考方案1】：

您可以将音频元素添加到 DOM 并通过 javascript 动态更改它。

setTimeout(function() 
			document.getElementById('audio').src = 'http://gget.it/u1urz3zh/popsound.mp3';
			document.getElementById('audio').load();
			document.getElementById('audio').play();
		, 2000);

<audio id="audio"></audio>

【讨论】：

在三星手机（Android 版 Chrome）上试过，不行。另见bugs.chromium.org/p/chromium/issues/detail?id=138132

【参考方案2】：

这是我在一个网络项目中播放声音的方式， 我使用过 JQuery，但您可以稍微修改一下以使用 Javascript 或改用 JQuery。

创建一个html标签音频并设置它的来源。

<audio id="chatAudio"><source src="01.mp3" type="audio/mpeg"></audio>

并使用 JQuery 触发音频播放方法。

$('#chatAudio')[0].play();

我不确定它是否适合你。但是你可以试试这个方法。

【讨论】：

不适用于我的 Android 版 Chrome。它对你有用吗@GauravLad？再一次，这就是原因：bugs.chromium.org/p/chromium/issues/detail?id=138132

其实距离我上次使用这些代码已经快8-9个月了，

仍然有效：demos.9lessons.info/notify/index.html

【参考方案3】：

至少这个技巧可以提前知道媒体播放是否需要用户手势：

function mediaPlaybackRequiresUserGesture()  
  var audio = document.createElement('audio');
  audio.play();
  return audio.paused;

Found here.

【参考方案4】：

我在我的应用程序中遇到了同样的问题。我的应用使用场景是这样的： 1) 单击按钮以显示包含信息的表格（用户操作） 2) 通过 AJAX 显示表格并刷新其中的数据 3) 数据更改时播放声音 幸运的是，我有用户操作（第 1 步），所以我能够通过它“启动”声音，然后通过 javascript 播放它，而无需用户操作。查看代码。

HTML

<audio id="kohoutAudio">
    <source src="views/images/kohout.mp3">
</audio>

<button id="btnShow">Show table</button>

Javascript

$("#btnShow").click(function () 
    //some code to show the table
    //initialize the sound
    document.getElementById('kohoutAudio').play();
    document.getElementById('kohoutAudio').pause();
    );

function announceChange()
    document.getElementById('kohoutAudio').play();
;

【参考方案5】：

除此之外，Android 中的 Chrome 浏览器现在有一个权限选项页面，允许用户设置自动播放选项。不确定这是否对您有帮助。

我附上了来自 Android Chrome 浏览器设置的图片：