Question

最近在我用

加载声音的项目中

var myAudio = new Audio("myAudio.mp3");
myAudio.play();

除非打开对话（即警告，确认），否则播放正常。但是当我尝试在我的html

中添加音频标签时

<audio id="audio1">
    <source src="alarm.mp3" type="audio/mpeg" />
</audio>

并使用

var myAudio1 = document.getElementById("audio1");
myAudio1.play()

在对话开启后，它继续发挥作用。有人知道为什么吗？另外更常见的是两种播放声音的方式有什么不同？

Answer 1

根据Mozilla的this wiki entry <audio>和new Audio() 应相同，但实际情况并非如此。每当我需要在JavaScript中创建一个音频对象时，我实际上只是创建一个<audio>元素：

var audio = document.createElement('audio');

这实际上创建了一个音频元素，您可以使用它，就像在页面的HTML中声明的<audio>元素一样。

要使用此技术重新创建示例，请执行以下操作：

var audio = document.createElement('audio');
audio.src = 'alarm.mp3'
audio.play();

Answer 2

JavaScript在“警报”或“确认”框中暂停。

您无法同时运行代码并显示alert()，confirm()或prompt()，它确实在等待用户输入，这是JavaScript的核心功能。

我假设完全在JavaScript范围内播放的音频文件就是这样做的原因。即使JavaScript警报/确认/提示打开，Flash视频剪辑或HTML5音频/视频也会继续播放。

至于哪种方法更好，那取决于你。使用内置警报/确认/提示的JavaScript做任何事情都是相当陈旧的，你可以用jQuery UI做出更好看的提示等等。

如果页面上有很多动态内容，或者在需要触发之前调查后台缓冲音频等等，那么JavaScript可能是更实用的方式

如果屏幕上只有一个播放器，则没有理由不插入HTML代码。虽然这些天不太可能影响任何人，但在没有理由的情况下严重依赖JavaScript仍然是不好的做法。

Answer 3

如果您要创建 - 那么您将在ios上遇到问题，因为它甚至会显示您将设置宽度：0px

Answer 4

我从网络上的几个答案中得出了下面的功能。

function playAudio(url){
  var audio = document.createElement('audio');
  audio.src = url;
  audio.style.display = "none"; //added to fix ios issue
  audio.autoplay = false; //avoid the user has not interacted with your page issue
  audio.onended = function(){
    audio.remove(); //remove after playing to clean the Dom
  };
  document.body.appendChild(audio);
}

Answer 5

var myAudio = new Audio("myAudio.mp3");更快，因为它不与DOM交互。

如果您正在使用多种音频和/或不需要用户与播放器控件进行交互，则应明确选择new Audio()，其中不涉及DOM。

Answer 6

首先让我回答它们之间的区别。 html 中的 audio 标签和 js 中的 new audio 对象，如果有区别是细微的和无意义的。他们实际上做同样的事情。如果您只想在网页中包含音频，那么使用 html 标签似乎是合适和推荐的。和如果您希望在用户进行交互时播放音频，那么 javascript Audio 对象似乎适合并推荐使用。例如; document.querySelector("button).onclick=()=>{let audio=new Audio(audio url); audio.play;

除此之外，这是 javascript 的主要目的。

现在使用html音频标签打开对话框时音频仍然播放的原因是因为浏览器首先加载您的html文件，执行文件内容直到遇到{{1} } 标记在 html 文件中并加载 javascript 文件。我想说的是，即使在脚本加载之前，浏览器也已经读取了音频标签。 Javascript 在遇到 script、alert() 或 prompt() 时暂停。因此“在打开警报后播放良好”。 (•‿•)。

javascript音频对象与HTML5音频标签

6 个答案: