使用 javascript 播放 mp3 文件

Question

通过 javascript 播放 mp3（非常短）文件的最佳跨浏览器方式是什么？ 我尝试了不同的方法，但总是有问题......

编辑 1：

我不需要一个“完整”的播放器，我只需要一个 function 就可以在每次发生事情时调用

编辑 2：

好的，我必须更好地解释我的问题。 服务器是连接在 LAN 中的智能手机，但并不总是连接到 inte.net。 我想使用 mp3，因为该文件只有 3kb（而不是 60kb 的 wav），但如果播放该文件的机制太“重”（播放器或 jquery.js），我认为最好使用 wav 文件。 其他建议？

Answer 1

用这个：

new Audio('your/url/here').play()

可以在MDN上找到此文档（ HTMLAudioElement ），请注意大多数控件都是由HTMLMediaElement继承的。

Answer 2

只需直接下载到音频文件即可加载页面。 检测浏览器是否支持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 &raquo;</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>

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

我想大多数数以万计的预制MP3播放插件都是这样的。

更新：

由于您已经编辑了问题以指定您更喜欢不使用jQuery的解决方案，我将指出重写此不使用jQuery是微不足道的。 它只是更长，更不优雅。 请记住，从CDN加载的Javascript库通常由浏览器缓存。

Answer 3

尝试使用我自己的脚本，

<script src="https://webtinq.nl/ap/script.js></script>

链接该脚本后，您唯一需要做的就是

play('example');

使用 javascript 播放 mp3 文件

问题描述

3 个解决方案

解决方案1
16 2015-01-11 18:28:49

解决方案2
5 2012-02-15 21:00:08

解决方案3
0 2023-01-22 15:43:58

使用 javascript 播放 mp3 文件

问题描述

3 个解决方案

解决方案1 16 2015-01-11 18:28:49

解决方案2 5 2012-02-15 21:00:08

解决方案3 0 2023-01-22 15:43:58

解决方案1
16 2015-01-11 18:28:49

解决方案2
5 2012-02-15 21:00:08

解决方案3
0 2023-01-22 15:43:58