在完成播放之前再次单击播放音频文件

Posted 2023-02-25

【中文标题】在完成播放之前再次单击播放音频文件

【英文标题】：Playing audio file on click again before it's finished playing

【发布时间】：2016-04-28 20:14:00

【问题描述】：

我正在制作一个非常简单的音板式网站（这实际上是我的第一个项目）。前提是用户加载页面，点击按钮，播放声音。

我遇到的问题是，如果用户单击按钮“A”，在播放按钮“A”的声音所需的 x 时间内，单击按钮“A”不会启动其另一个实例声音。

因此，如果按钮“A”的声音播放时间为 1 秒，而用户在 1 秒内点击 10 次，则按钮“A”的声音只播放一次，而不是 10 次。

不确定此链接是否有效...但这是指向小提琴的链接？请注意，小提琴上没有附加音频，因此当您单击按钮时实际上不会播放声音。 https://jsfiddle.net/pmqr9L0s/

这是我的 js 到目前为止的样子：

$(document).ready(function()
    var kickBass1 = new Audio("audio/kickbass1.mp3");
    $(".kickbass1").click(function()
        kickBass1.play();
    );

    var hihat1 = new Audio("audio/hihat1.mp3");
    $(".hihat1").click(function()
        hihat1.play();
    );

    var snare1 = new Audio("audio/snare1.mp3");
    $(".snare1").click(function()
        snare1.play();
    );

    //add record feature later?
    var record = function()
    
);

【参考方案1】：

尝试在您的点击处理程序中移动您的变量，以便每次点击您的一个按钮时创建一个新的Audio 元素。

$(document).ready(function()        
    $(".kickbass1").click(function()
        var kickBass1 = new Audio("audio/kickbass1.mp3");
        kickBass1.play();
    );    

    $(".hihat1").click(function()
        var hihat1 = new Audio("audio/hihat1.mp3");
        hihat1.play();
    );    

    $(".snare1").click(function()
        var snare1 = new Audio("audio/snare1.mp3");
        snare1.play();
    );
);

【讨论】：

谢谢！有点离题，但是虽然我在桌面上没有注意到任何问题，但是当我在移动设备上打开我的网站时，点击按钮和播放音频之间似乎有一点延迟 - 这是副产品我播放音频文件的方式是什么？

可能取决于许多不同的因素，包括您手机上的内存和处理器，以及它是如何加载 javascript 的，但我不认为这种差异与您编写的方式有任何关系代码。如果您的目标是移动设备，最好为此类应用程序制作原生应用程序。我敢肯定，手机自带的加载和播放声音的 API 比移动浏览器通过 JS 加载和播放声音的效率更高。