Question

I did this little script that can control the playing of an audio track on a webpage.

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>

I would like know if there is a way for play the file on the page load. I know this way, It's something really 90s but I have to test something on the page.

Answer 1

Add *.autoplay = true; before you load.

 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

Use the autoplay attribute on your audio element. Also, try to prefer using the Audio() constructor when generating an Audio element in JavaScript. Lastly, don't call audio.load() here, setting the src value in this case triggers that automatically.

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

You can use the autoplay attribute on the audio tag.

Answer 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在具有声音自动播放功能的媒体上实施了阻止程序，因此默认情况下禁用自动播放功能。用户必须手动启用此功能。他们建议开发人员添加一个片段来检测此行为：

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
    });
}

autoplay html audio created with javascript

4 个答案: