如何让 HTML5 音频在点击时只播放一次？

Posted 2023-02-25

【中文标题】如何让 HTML5 音频在点击时只播放一次？

【英文标题】：How to make HTML5 audio play exactly once on clicking?

【发布时间】：2015-04-04 14:40:23

【问题描述】：

我正在对合成语音进行在线评估调查。部分测试要求听众只能听到给定的 WAV 文件播放一次（作为实验控制）。

我已经想出了如何简单地嵌入带有控件的音频剪辑，以便可以多次播放：

    <audio controls>
    <source src="http://mypage.com/my_sound.wav" type="audio/wav">
    Your browser does not support the audio element
    </audio>

此外，我看到一些 html 问题试图解决 HTML 音频仅播放一次的错误：

Audio played once only in Google Chrome in html

javascript + HTML5: Audio will only play once under certain circumstances

但是，我的问题是如何故意编码（只需单击一次播放 HTML 音频）？我所看到的一切都将其视为要修复的错误，而不是有意的目标。

干杯！

【参考方案1】：

我也在找这个。

你有几个选择。

这个停止的关键是onended事件，正如你所料，当胖女人停止唱歌时触发。

<audio id="gilda">
  <source url="epic-aria.mp3">
</audio>

var fatLady = document.getElementById('gilda');
fatLady.onended = function() 
  fatLady.pause();
  fatLady.currentTime = 0; // << only needed if you're cutting off the sound misstep (before the end) and need to return to the beginning - but you might need it. Since you are doing some gaming, I figured that might come up...
;

还有一种 jQuery 方式，我目前正在使用。然而，jQuery 不使用 onended - 它使用 end 代替...

var fatLady = $('#gilda');
fatLady.bind('ended', function(event) 
  fatLady
    .pause()
    .currentTime = 0; // << haven't field-tested this yet, but jquery didn't yell at me about it.

);

如果您遇到任何问题，请告诉我。