Question

当我点击按钮时，我正在尝试播放音频文件，但它不起作用，我的HTML代码是：

<html>    
    <body>
        <div id="container">
            <button id="play">
                Play Music
            </button>
        </div>
    </body>
</html>

我的JavaScript是：

$('document').ready(function () {
    $('#play').click(function () {
        var audio = {};
        audio["walk"] = new Audio();
        audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3"
        audio["walk"].addEventListener('load', function () {
            audio["walk"].play();
        });
    });
});

我也为此创建了Fiddle。

Answer 1

采用哪种方法？

您可以使用<audio>代码或<object>或<embed>播放音频。延迟加载（在需要时加载）声音是最佳方法，如果它的大小很小。您可以动态创建音频元素，加载后可以使用.play()启动它并使用.pause()暂停。

我们使用的东西

我们将使用canplay事件来检测我们的文件是否已准备好播放。

音频元素没有.stop()功能。我们只能暂停它们。当我们想从音频文件的开头开始时，我们改变它的.currentTime。我们将在示例audioElement.currentTime = 0;中使用此行。要实现.stop()功能，我们先暂停文件，然后重置其时间。

我们可能想知道音频文件的长度和当前的播放时间。我们已经在上面学习.currentTime，了解我们使用.duration的长度。

示例指南

当文档准备就绪时，我们动态创建了一个音频元素
我们根据想要播放的音频来设置其来源。
我们使用'已结束'事件再次启动文件。

当currentTime等于其持续时间时，音频文件将停止播放。无论何时使用play()，都会从头开始。

我们使用timeupdate事件来更新音频.currentTime发生变化时的当前时间。
我们使用canplay事件在文件准备好播放时更新信息。
我们创建了播放，暂停，重启的按钮。

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3');
    
    audioElement.addEventListener('ended', function() {
        this.play();
    }, false);
    
    audioElement.addEventListener("canplay",function(){
        $("#length").text("Duration:" + audioElement.duration + " seconds");
        $("#source").text("Source:" + audioElement.src);
        $("#status").text("Status: Ready to play").css("color","green");
    });
    
    audioElement.addEventListener("timeupdate",function(){
        $("#currentTime").text("Current second:" + audioElement.currentTime);
    });
    
    $('#play').click(function() {
        audioElement.play();
        $("#status").text("Status: Playing");
    });
    
    $('#pause').click(function() {
        audioElement.pause();
        $("#status").text("Status: Paused");
    });
    
    $('#restart').click(function() {
        audioElement.currentTime = 0;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Sound Information</h2>
    <div id="length">Duration:</div>
    <div id="source">Source:</div>
    <div id="status" style="color:red;">Status: Loading</div>
    <hr>
    <h2>Control Buttons</h2>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="restart">Restart</button>
    <hr>
    <h2>Playing Information</h2>
    <div id="currentTime">0</div>
</body>

Answer 2

jQuery中的实际答案是

$("#myAudioElement")[0].play();

它不像您期望的那样与$("#myAudioElement").play()一起使用。官方的原因是将它合并到jQuery中会为每个元素添加一个play()方法，这会导致不必要的开销。因此，您必须通过它在您使用$("#myAudioElement")检索的DOM元素数组中的位置来引用它，即{0}。

此引文来自bug that was submitted about it，已被关闭为“feature / wontfix”：

为此，我们需要为每个DOM元素方法名称添加一个jQuery方法名称。当然，这种方法对非媒体元素没有任何作用，因此看起来不值得花费额外的字节。

Answer 3

对于其他跟随的人，我只是采取了艾哈迈德的答案并更新了原来的提问者jsfiddle here，代替：

audio.mp3

的

http://www.uscis.gov/files/nativedocuments/Track%2093.mp3

通过网络免费提供的mp3链接。感谢您分享简单的解决方案！

Answer 4

我这里有一个很好的多功能解决方案，有一个后备：

<script type="text/javascript">
    var audiotypes={
        "mp3": "audio/mpeg",
        "mp4": "audio/mp4",
        "ogg": "audio/ogg",
        "wav": "audio/wav"
    }

    function ss_soundbits(sound){
        var audio_element = document.createElement('audio')
        if (audio_element.canPlayType){
            for (var i=0; i<arguments.length; i++){
                var source_element = document.createElement('source')
                source_element.setAttribute('src', arguments[i])
                if (arguments[i].match(/\.(\w+)$/i))
                    source_element.setAttribute('type', audiotypes[RegExp.$1])
                audio_element.appendChild(source_element)
            }
            audio_element.load()
            audio_element.playclip=function(){
                audio_element.pause()
                audio_element.currentTime=0
                audio_element.play()
            }
            return audio_element
        }
    }
</script>

之后，您可以根据需要初始化任意数量的音频：

<script type="text/javascript" >
    var clicksound  = ss_soundbits('your/path/to/click.ogg', "your/path/to/click.mp3");
    var plopsound  = ss_soundbits('your/path/to/plopp.ogg', "your/path/to/plopp.mp3");
</script>

现在，您可以通过简单的事件调用（如

）随时访问初始化的音频元素

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

Answer 5

那：

$('#play').click(function() {
  const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3");
  audio.play();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 6

JSFiddle Demonstration

这就是我使用的JQuery：

$('.button').on('click', function () { 
    var obj = document.createElement("audio");
        obj.src = "linktoyourfile.wav"; 
        obj.play(); 
});

Answer 7

如果这在2019年对您有帮助，那么您应该知道我构建了一个jquery / Zepto插件。您可以在这里下载： https://github.com/xpectmore/simple-jquery-audio-play-button

这是免费的MANKIND许可，非常简单。我做了这个插件，因为“厨房的人”决定阻止MOZILLA Firefox版本66的自动播放（我在我的php框架中使用过，在“ Hello World”演示中使用“ Welcome”文字说出某些语言的音频，仅用于演示目的）），因此，这不是本论坛的答案，而是对MOZILLA的反馈。

单击按钮时使用jQuery播放音频文件

7 个答案:

采用哪种方法？

我们使用的东西

示例指南