Question

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

工作正常，但是当我一个接一个地按下图像时，它不能播放声音，只有蜜蜂一次播放。

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

提前致谢。

Answer 1

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

加载/缓冲你的声音：

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

播放声音：

snd.play();

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

snd.currentTime=0;

Answer 2

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

HTML5有新的<audio> - 可用于播放声音的标记。它   甚至还有一个非常简单的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>

Answer 3

您可以使用 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>

Answer 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>

关于代码的更多信息 http://html5doctor.com/html5-audio-the-state-of-play/

Answer 5

基于接受的答案的示例（已在Chrome 70中进行了测试），但我无需重新提示：

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

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

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

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

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>

在html页面中点击按钮立即播放声音

6 个答案: