小编vng*_*lst的帖子

Safari 11对HTML5音频的新自动播放限制

我正在试图弄清楚Safari 11的(和iOS')自动播放限制是如何实现的,我不明白为什么以下内容不会开始播放音频文件:

/*
    Call stack, this doesn't work 
*/

const btn = document.createElement('BUTTON')
const textLabel = document.createTextNode('Play')
const audio = new window.Audio()
audio.src = 'https://raw.githubusercontent.com/vnglst/autoplay-tutorial/master/mp3/winamp.mp3'
// audio.controls = true

btn.appendChild(textLabel)
document.getElementById('root').appendChild(btn)
document.getElementById('root').appendChild(audio)

btn.onclick = e => {
  window
    .fetch(`https://api.github.com/repos/vnglst/autoplay-tutorial/contents/mp3/modem-sound.mp3`)
    .then(resp => resp.json())
    .then(json => {
      audio.src = json.download_url
      audio.play()
    })
}
Run Code Online (Sandbox Code Playgroud)
<div id='root'/>
Run Code Online (Sandbox Code Playgroud)

Safari适用于以下情况:

/*
    Call stack, using a fake Promise. This works 
*/

const btn = document.createElement('BUTTON')
const textLabel = document.createTextNode('Play')
const audio = new window.Audio()
audio.src = 'https://raw.githubusercontent.com/vnglst/autoplay-tutorial/master/mp3/modem-sound.mp3' …
Run Code Online (Sandbox Code Playgroud)

javascript safari ios html5-audio

13
推荐指数
1
解决办法
2837
查看次数

标签 统计

html5-audio ×1

ios ×1

javascript ×1

safari ×1