自动播放使用 javascript 创建的 html 音频

Posted 2023-02-25

【中文标题】自动播放使用 javascript 创建的 html 音频

【英文标题】：autoplay html audio created with javascript

【发布时间】：2016-07-11 21:41:38

【问题描述】：

我做了这个小脚本，可以控制网页上音轨的播放。

var source = "audio/burger.mp3"
var audio = document.createElement("audio");
audio.load()
audio.addEventListener("load", function() 
  audio.play();
, true);
audio.src = source;



$("#playBtn").click(function() 
  audio.play();
);

$("#pauseBtn").click(function() 
  audio.pause();
);

$("#stopBtn").click(function() 
  audio.pause();
  audio.currentTime = 0;
);

<ul>
  <li>
    <a><i class="fa fa-play" aria-hidden="true" id="playBtn"></i></a>
  </li>
  <li>
    <a><i class="fa fa-pause" aria-hidden="true" id="pauseBtn"></i></a>
  </li>
  <li>
    <a><i class="fa fa-stop" aria-hidden="true" id="stopBtn"></i></a>
  </li>
</ul>

我想知道是否有办法在页面加载时播放文件。 我知道这样，这确实是 90 年代的东西，但我必须在页面上测试一些东西。

【问题讨论】：

如果我理解正确，您应该在音频标签中使用“自动播放”属性。 w3schools.com/tags/att_audio_autoplay.asp

【参考方案1】：

添加 *.autoplay = true;在加载之前。

 var source = "audio/burger.mp3"
 var audio = document.createElement("audio");
 //
 audio.autoplay = true;
 //
 audio.load()
 audio.addEventListener("load", function()  
     audio.play(); 
 , true);
 audio.src = source;

【参考方案2】：

在您的音频元素上使用autoplay 属性。此外，在 javascript 中生成 Audio 元素时，尝试更喜欢使用 Audio() 构造函数。最后，不要在这里调用audio.load()，在这种情况下设置src 值会自动触发。

var source = "https://html5music.herokuapp.com/media/no_words.webm";
var audio = new Audio(); // use the constructor in JavaScript, just easier that way
audio.addEventListener("load", function() 
  audio.play();
, true);
audio.src = source;
audio.autoplay = true; // add this

$("#playBtn").click(function() 
  audio.play();
);

$("#pauseBtn").click(function() 
  audio.pause();
);

$("#stopBtn").click(function() 
  audio.pause();
  audio.currentTime = 0;
);

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a><i class="fa fa-play" aria-hidden="true" id="playBtn"></i></a>
  </li>
  <li>
    <a><i class="fa fa-pause" aria-hidden="true" id="pauseBtn"></i></a>
  </li>
  <li>
    <a><i class="fa fa-stop" aria-hidden="true" id="stopBtn"></i></a>
  </li>
</ul>

【讨论】：

将此解决方案复制粘贴到我的jsfiddle - 音乐开始播放，但播放/暂停/停止按钮不起作用。我错过了什么？

@Gallex 你错过了 jQuery

无法播放此流链接http://31.14.40.149:8000/;stream.mp3

有了新的浏览器自动播放策略，这样的解决方案就不再适用了 :(.

【参考方案3】：

您可以在音频标签上使用autoplay 属性。

【参考方案4】：

同意 Patrick Roberts 关于使用 new Audio 而不是 document.createElement('audio) 的建议。但是，要在页面加载时自动播放音频，您不需要添加任何事件侦听器。设置：

有效的媒体来源 audio.autoplay = true

将在加载音频后立即开始播放。所以JS部分可以简化为：

var source = "audio/burger.mp3"
var audio = new Audio();
// no event listener needed here
audio.src = source;
audio.autoplay = true;

$("#playBtn").click(function() 
  audio.play();
);

$("#pauseBtn").click(function() 
  audio.pause();
);

$("#stopBtn").click(function() 
  audio.pause();
  audio.currentTime = 0;
);

然而，这个帖子有点过时了，而且政策已经改变了。从 2017 年开始，ios 和 MacOS 上的 safari 11+ 以及 chrome 64+ 不再支持音频/视频自动播放。请参阅：autoplay policy changes for macOS 和 autoplay policy changes。

Safari 在自动播放声音的媒体上实施了一个拦截器，因此默认情况下自动播放被禁用。用户必须手动启用此功能。他们建议开发人员添加一个 sn-p 来检测这种行为：

var promise = document.querySelector('video').play();

if (promise !== undefined) 
    promise.catch(error => 
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    ).then(() => 
        // Auto-play started
    );