15

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

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

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

4

6 回答 6

21

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

加载/缓冲你的声音：

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

播放声音：

snd.play();

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

snd.currentTime=0;
于 2012-10-18T12:01:01.790 回答
13

@klaustopher 的这个答案https://stackoverflow.com/a/7620930/1459653（https://stackoverflow.com/users/767272/klaustopher）帮助了我。他写了：

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>
于 2015-09-26T18:19:37.720 回答
1

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

在 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>
于 2013-11-28T00:26:56.147 回答
1

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

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

<script>
    var snd = new Audio("/Content/mysound.wav"); 
</script>
于 2018-11-28T15:09:10.373 回答
1

此代码可让您放入图片按钮；单击时会发出声音。它适用于 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>

有关代码的更多信息，请查看 http://html5doctor.com/html5-audio-the-state-of-play/

于 2015-12-03T03:45:38.813 回答
0

这就是我要播放音效的方法：

    <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();}

或者您可以运行此代码段：

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>

于 2021-05-20T23:07:17.893 回答