javascript 使用javascript播放mp3文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9300655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Play mp3 file using javascript
提问by supergiox
Which is the best and cross-browser way to play a mp3 (very short) file via javascript? I tried different ways but there's always a problem...
哪个是通过 javascript 播放 mp3（非常短）文件的最佳跨浏览器方式？我尝试了不同的方法，但总是有问题......
EDIT 1:
编辑 1：
I don't need a "full" player, I just need a function than I can call everytime something happens
我不需要“完整”的播放器，我只需要一个函数，每次发生某些事情时我都可以调用它
EDIT 2:
编辑2：
Ok, I've to explain better my problem. The server is a smartphone connected in a LAN, but not always to the internet. I want to use mp3 because the file weighs only 3kb (instead of 60kb of wav), but if the mechanism to play this file is too "heavy" (a player or jquery.js) I think is better to use the wav file. Other suggestions?
好的，我必须更好地解释我的问题。服务器是连接在 LAN 中的智能手机，但并不总是连接到 Internet。我想使用 mp3，因为该文件仅重 3kb（而不是 60kb 的 wav），但如果播放此文件的机制太“重”（播放器或 jquery.js），我认为最好使用 wav 文件。其他建议？
回答by Ties
Use this:
用这个：
new Audio('your/url/here').play()
The documentation for the this (HTMLAudioElement) can be found at MDN, note that most of the controls are inherited by HTMLMediaElement.
这个 ( HTMLAudioElement)的文档可以在 MDN 上找到，注意大多数控件都是由HTMLMediaElement.
回答by user240515
Load the page with just a direct download to the audio file. Detect if the browser supports MP3s. If it does, progressively enhance the direct download into an AUDIO tag. Here's a sample:
只需直接下载到音频文件即可加载页面。检测浏览器是否支持 MP3。如果是，请逐步增强直接下载到 AUDIO 标签的能力。这是一个示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Audio demo</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
</head>
<body>
<p id="audio">
<a href="BadAppleEnglish.mp3">Listen »</a>
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="audio.js"></script>
</body>
</html>
And the Javascript:
和 Javascript：
$(function () {
var audioElement = $('#audio'),
href = audioElement.children('a').attr('href');
$.template('audioTemplate', '<audio src="${src}" controls>');
if (Modernizr.audio.mp3) {
audioElement.empty();
$.tmpl('audioTemplate', {src: href}).appendTo(audioElement);
}
});
I would imagine that most of the zillions of prebuilt MP3 playing plugins work like this.
我想大多数预建的 MP3 播放插件都是这样工作的。
UPDATE:
更新：
Since you've edited the question to specify that you'd prefer a solution that doesn't use jQuery, I will point out that rewriting this to not use jQuery is trivial. It's just longer and less elegant. Do keep in mind that Javascript libraries loaded from CDNs are usually cached by the browser.
由于您已编辑问题以指定您更喜欢不使用 jQuery 的解决方案，因此我将指出，将其重写为不使用 jQuery 是微不足道的。它只是更长，更不优雅。请记住，从 CDN 加载的 Javascript 库通常由浏览器缓存。
