Question

我正在试图弄清楚Safari 11（和iOS）的自动播放限制是如何实现的，我不明白为什么以下内容无法开始播放音频文件：

<div id='root'/>

/*
    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'
// audio.controls = true

btn.appendChild(textLabel)
document.getElementById('root').appendChild(btn)
document.getElementById('root').appendChild(audio)

const mockedPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const src = 'https://raw.githubusercontent.com/vnglst/autoplay-tutorial/master/mp3/winamp.mp3'
    return resolve(src)
  }, 500)
})

btn.onclick = (e) => {
  mockedPromise.then(src => {
    audio.src = src
    audio.play()
  })
}

Safari适用于以下情况：

<div id='root'/>

procedure TForm1.ButtonCreateClick(Sender: TObject);
begin
  ClientDataSet1.Close;
  ClientDataSet1.FieldDefs.Clear;
  ClientDataSet1.FieldDefs.Add('ID', ftInteger);
  ClientDataSet1.FieldDefs.Add('Collection', ftString, 50);
  ClientDataSet1.CreateDataSet;
end;

有人知道Safari如何确定某些内容是否为自动播放？我不是在寻找一种解决方法（例如，启动和暂停帮助），但我正在试图弄清楚它是如何工作的。

（有关Safari的新自动播放政策的更多背景信息，请访问：https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/）

Answer 1

自动播放

audio.autoplay = true;

请注意，在使用W3C的移动设备中，用户必须触发播放才能避免移动数据费用。

因此，在移动设备上，您需要向用户显示按钮以触发自动播放。

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';
audio.autoplay = true;
// audio.controls = true

btn.appendChild(textLabel)
document.getElementById('root').appendChild(btn);
document.getElementById('root').appendChild(audio);

const mockedPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const src = 'https://raw.githubusercontent.com/vnglst/autoplay-tutorial/master/mp3/winamp.mp3';
    return resolve(src);
  }, 500);
})

btn.onclick = (e) => {
  mockedPromise.then(src => {
    audio.src = src;
    audio.play();
  })
}

<div id='root'/>

Answer 2

您需要从以下位置更改算法

user clicks -> loads audio information -> changes source -> play

到

user clicks -> changes source -> play

基本上，您需要在src中更改audio，并在用户单击播放按钮后立即开始播放。

存在中介获取功能时，iOS会阻止自动播放。

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

2 个答案: