我正在开发 SAAS 解决方案，我需要客户接收来自应用程序的通知声音。即使他们只是在没有与它进行任何交互的情况下启动它。谷歌已经改变了 Chrome 在这方面的行为，现在用户需要点击网页才能获得通知声音。我发现可以在这里明确地允许声音：
然后用户应该为您的网站明确启用声音：
现在用户无需单击即可启用声音通知。我的问题：是否可以像对麦克风一样请求用户对声音的许可：
【问题讨论】：
标签： javascript google-chrome audio audiocontext
只需制作自己的警报模式。您可以通过在静音时尝试播放音频来检测是否需要它
const audio = new Audio( 'https://dl.dropboxusercontent.com/s/h8pvqqol3ovyle8/tom.mp3' );
audio.muted = true;
const alert_elem = document.querySelector( '.alert' );
audio.play().then( () => {
// already allowed
alert_elem.remove();
resetAudio();
} )
.catch( () => {
// need user interaction
alert_elem.addEventListener( 'click', ({ target }) => {
if( target.matches('button') ) {
const allowed = target.value === "1";
if( allowed ) {
audio.play()
.then( resetAudio );
}
alert_elem.remove();
}
} );
} );
document.getElementById( 'btn' ).addEventListener( 'click', (e) => {
if( audio.muted ) {
console.log( 'silent notification' );
}
else {
audio.play();
}
} );
function resetAudio() {
audio.pause();
audio.currentTime = 0;
audio.muted = false;
}.alert {
font: 14px Arial, sans-serif;
position: fixed;
top: 0;
left: 0;
background: white;
border: 1px solid lightgray;
box-shadow: 3px 3px 12px lightgray;
}
p { margin: 12px; }
.alert .buttons {
float: right
}<div class="alert">
<p>This webpage would like to play sounds</p>
<p class="buttons">
<button value="0">Block</button>
<button value="1">Allow</button>
</p>
</div>
<button id="btn">trigger notification</button>Ps：注意Permissions API specs中有一个"speaker"的值，但是这个是为了允许设备通过HTMLMediaElement.setSinkId()方法，这又是一个野兽。 （如果您对这个尚未实现的功能感兴趣，可以查看this Q/A）。
【讨论】：