如何通过 HTML 5 中的 <audio> 标签使用 javascript 使用选定的音频文件？

Posted 2023-02-25

【中文标题】如何通过 HTML 5 中的 <audio> 标签使用 javascript 使用选定的音频文件？

【英文标题】：How to use the selected audio file using javascript, via <audio> tag in HTML 5?

【发布时间】：2013-03-13 12:40:05

【问题描述】：

如何通过 html5 中的 <audio> 标签使用 javascript 部署选定的音频文件？ 我的代码是这样的：

<audio controls id="audio1">
    <source  src="" type="audio/ogg">
<source  src="" type="audio/mpeg">
</audio>

我不想手动提供src。相反，我想通过 JavaScript 动态设置它。

在 JavaScript 中，用于从文件中选择 src：

document.querySelector('#fileSelect').addEventListener('click', function(e) 
       // Use the native click() of the file input.
     audio.src = document.querySelector('#fileElem').click();
, false);

我欢迎任何建议。谢谢。

【问题讨论】：

谢谢家伙！和 mariozski 在这里，我想通过使用 javascript 来更改 audio-tag 的 src 属性。在 javascript 中，我正在选择要在 HTML 音频标签中播放的音轨。谢谢大家的帮助。

【参考方案1】：

你为什么不创建一个对象 Audio 并做这样的事情，而不是创建一个标签：

var som = new Audio();
som.src = "powerup.mp3";
som.load();

audio.readyState >= audio.HAVE_CURRENT_DATA 之后 你可以拨打som.play();

这是前段时间为游戏框架编写的示例：https://github.com/hamilton-lima/vaca5/blob/master/lib/audio.js

【讨论】：

hamilton 我看了你的代码，它很好用，而且可以用于游戏。我尝试了您的建议，但它不起作用并且无法使用 js 动态地将所选文件输入获取到 标记源。

我无法使用 标签...仅对我有用，使用 new Audio() 创建音频对象。

【参考方案2】：

我不确定我是否理解您想要实现的目标。但是要为您发布的音频设置源：

var element = document.getElementById('audio');
if (element.canPlayType('audio/wav')) 
  element.src = "link";
 else if (element.canPlayType('audio/mpeg')) 
  element.src = "link";
 else 
   alert('Your browser does not support wav/mpeg audio.');

它不工作吗？究竟是什么问题？也许准备一些小提琴来仔细看看你想要实现什么。