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

Question

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

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 年代的东西，但我必须在页面上测试一些东西。

Answer 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;

Answer 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>

Answer 3

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

Answer 4

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

1. 有效的媒体来源
2. 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
    });
}