如何在 jQuery 中启动和停止音频文件？

Posted 2023-02-25

【中文标题】如何在 jQuery 中启动和停止音频文件？

【英文标题】：How to start and stop an audio file in jQuery?

【发布时间】：2016-11-22 13:35:30

【问题描述】：

$("ul").on("click", ".start", function() 
    console.log("started");
    var timeInput = $(this).parent().children('.time');
    var timeInputValue = timeInput.val();
    var milliSeconds = Number(timeInputValue)*60*1000;
    console.log(milliSeconds);

    setTimeout(() => 
        audio.play();
        alert("Time Over");
        audio.pause();
        $(this).parent().children('.task').toggleClass("completed");
    , milliSeconds);
)

<audio src="assets/audio/siren.mp3" id="audio"></audio>

我对此一无所知。我有点像凭空提取应用程序功能并尝试。所以，很明显我的做法是错误的，因为它不起作用。

我想要做的是，让 setTimout 函数播放音频文件。然后会出现一个警告框，然后停止。

请帮帮我。

谢谢

【问题讨论】：

你不需要 jQuery 来启动/停止音频。

你所拥有的应该可以工作 - 假设你的 audio 变量是对 <audio> DOMElement 的引用

请参考下面的链接有一步一步的解释。 ***.com/questions/8489710/…

@RoryMcCrossan 是的。有效。我不知道，但有一个问题。我们不能停止音频吗？而不是暂停它？

您可以将volume 属性设置为0，如果这就是您的意思

【参考方案1】：

您实际上从未将audio 设置为任何内容。

var audio = document.getElementById('audio');

audio.play();
alert('this is a blocking function, once closed the audio will stop');
audio.pause();

另外，您将音频设置为播放、提醒，然后在超时后全部停止。 alert 是一个阻塞函数，因此音频将一直播放，直到您关闭警报为止，除了延迟音频启动 milliSeconds 之外，超时无用。

【讨论】：

嗨，是的，我的代码开始工作了。但是，除了暂停之外，还有什么可以停下来的吗？

【参考方案2】：

在javascript中播放声音不需要使用jquery

Javascritpt

var audio = document.getElementById('audio');
//Play
audio.play();
//Pause
audio.pause();
//Stop
sound.pause();
sound.currentTime = 0;

如果要检测音频的结束，可以使用ended media event

audio.addEventListener("ended", function()
    audio.pause();
    audio.currentTime = 0;
    $(this).parent().children('.task').toggleClass("completed");
    console.log("ended");
);