在 HTML 页面中单击按钮时立即播放声音答案

【问题标题】：Immediate play sound on button click in HTML page在 HTML 页面中单击按钮时立即播放声音
【发布时间】：2012-10-08 20:50:41
【问题描述】：

在我的 HTML 页面中，我有 9 个用于拨号的图像和一个显示按下数字的文本框。我希望每个图像在用户单击它们时立即播放哔声。我尝试使用带有隐藏属性的嵌入并将其源导航到 .wav 声音。

它工作正常，但是当我立即按下图像时，它无法播放声音，最后只有蜜蜂。

有没有更快的方式在“onclick”方法上播放 .wav 声音？

【问题讨论】：

你的设备和浏览器是......？
我所有的用户都使用 Internet Explorer。

标签： buttonclick playsound

【解决方案1】：

如果您只需要支持最近的浏览器，那么 HTML 5 为您提供了Audio 对象

加载/缓冲您的声音：

var snd = new Audio("file.wav");

播放声音：

snd.play();

将它重新提示到开头（以便您可以再次播放）：

snd.currentTime=0;

【讨论】：

Paul，我试过了，它在 Mozilla 和 Opera 中运行良好。但不幸的是，它在 IE 8 中不起作用 :(。是否有任何替代“音频”对象以便旧 IE 浏览器支持？
您好 Paul，我在 IE 9 中测试了“音频”对象，它没有显示任何错误，但没有工作并且什么也不做？我必须为此启用任何功能吗？
声音是如何编码的？ IE9 只喜欢 MP3。此图表 (w3schools.com/html/html5_audio.asp) 显示了哪些浏览器支持哪些格式。如果你想覆盖所有浏览器，你需要将声音编码成两种格式：mp3 & wav

【解决方案2】：

您可以使用 embed 元素来播放声音，但您必须检查不同浏览器支持的格式。

Embed element on MDN

<a onclick="playSound('1.mp3')">
   <img src="1.gif">
</a>
<div id="sound"></div>

<script>
   var playSound = function (soundFile) {
      $("#sound").html("<embed src=\"" + soundFile + "\" hidden=\"true\" autostart=\"true\" />");
   }
</script>

【讨论】：

我已经尝试过Embed，但运行速度太慢。因为用户可以立即按下几个按钮。

【解决方案3】：

@klaustopher (https://stackoverflow.com/users/767272/klaustopher) 的这个回答 https://stackoverflow.com/a/7620930/1459653 帮助了我。他写道：

HTML5 具有新的<audio>-Tag，可用于播放声音。它甚至还有一个非常简单的 JavaScript 接口：

<audio id="sound1" src="yoursound.mp3" preload="auto"></audio> <button onclick="document.getElementById('sound1').play();">Play it</button>

以下是我实施他的建议的方法，以便单击Font Awesome 图标“fa-volume-up”（位于网页上“mule”之后）会播放“donkey2.mp3”声音（注：mp3不能在所有浏览器中播放）。

<p>In short, you're treated like a whole person, instead of a rented mule. <audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio><a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a>

【讨论】：

【解决方案4】：

这段代码可以让你放入一个图片按钮；单击时会发出声音。它适用于 Google Chrome 和 Microsoft Edge，但我无法在 Internet Explorer 中使用。我正在使用 html 5 代码；请复制并粘贴并添加您自己的示例。

</head>
<body>
<script>
var audio = new Audio("/Sample.wav ");
audio.oncanplaythrough = function ( ) { }
audio.onended = function ( ) { }
</script> <input type="image" src="file://C:/Sample.jpg" onclick="audio.play ( )">
</body>
</html>

【讨论】：

您可以使用这两行来使声音适用于 Internet Explorer，但我不断弹出消息；（Internet Explorer 限制此网页运行脚本或 ActiveX 控件）让我点击“允许被阻止的内容”所以它可以工作我正在使用 Windows10 var audio = new Audio("/Sample.wav "); var audio = new Audio("/Sample.mp3 ");

【解决方案5】：

示例基于接受的答案（在 Chrome 70 中测试），但我不需要重新提示：

<button onclick="snd.play()"> Click Me </button>

<script>
    var snd = new Audio("/Content/mysound.wav"); 
</script>

【讨论】：

【解决方案6】：

这就是我播放音效的方式：

    <html>
            <body>
        <audio id="sfx"><source src="mysound.mp3"></audio>
            <button onclick="playsound()" id="button">Play a sound!</button>
            <script> function playsound() {
    
    var sfx = document.getElementById("sfx");
    sfx.autoplay = 'true';
sfx.load();}

或者你可以运行这个 sn-p:

function playsound() {
  var mysound = document.getElementById("mysound");
  mysound.autoplay = 'true';
  mysound.load();
}

button {
  color: blue;
  border-radius: 24px;
  border: 5px solid red;
}

body {
  background-color: #bfbfbf;
}

<html>

<body>
  <audio id='mysound'><source src="click.mp3"><!-- "click.mp3" isn't a sound effect uploaded to the snippet, because I don't think you can upload sfx to snippets. (I'm new to stackoverflow, so there might be a way) But if you actually use a sound effect in that folder that you're using, it works.  --></audio>
  <button id='btn' onclick='playsound()'>Play a sound!</button>
</body>

</html>

【讨论】：