使用 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