Immediate play sound on button click in html page

2019-03-20 14:14发布

站内问答 / 前端开发
820 5 5

In my .html page I have 9 images for dialing numbers and one text box that shows the pressed numbers. I want each of those images to immediately play beep sound when users click on them. I tried to use embed with hidden property and navigate it's source to .wav sound.

It is working OK, but when I press the images one after another immediately, it cannot play sound and just bees once at the end.

Is there any faster way of playing a .wav sound on 'onclick' method?

Thanks in advance.

5条回答
我想做一个坏孩纸
2楼-- · 2019-03-20 14:52

This answer https://stackoverflow.com/a/7620930/1459653 by @klaustopher (https://stackoverflow.com/users/767272/klaustopher) helped me. He wrote:

HTML5 has the new <audio>-Tag that can be used to play sound. It even has a pretty simple JavaScript Interface:

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

Here's how I implemented his advice so that clicking on the Font Awesome icon "fa-volume-up" (located on the Web page after "mule.") results in "donkey2.mp3" sound playing (note: mp3 doesn't play in all browsers).

<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>
查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
3楼-- · 2019-03-20 15:01

If you only need to support recent browsers, then HTML 5 offers you the Audio object

to load/buffer your sound:

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

to play the sound:

snd.play();

to re-cue it to the beginning (so that you can play it again):

snd.currentTime=0;
查看更多
0人赞 添加讨论(0) 举报
贼婆χ
4楼-- · 2019-03-20 15:03

This code lets you put in a picture button; when click you get a sound. It works with Google Chrome and Microsoft Edge but I can't get it to work in Internet Explorer. I'm using html 5 codes; please copy and paste and add you own samples.

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

more on codes look at http://html5doctor.com/html5-audio-the-state-of-play/

查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
5楼-- · 2019-03-20 15:13

You can use embed element for play sounds, but you've to check the formats supported by the different browsers.

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>
查看更多
0人赞 添加讨论(0) 举报
唯我独甜
6楼-- · 2019-03-20 15:14

Example based on accepted answer (Tested in Chrome 70), but I didn't need to re-cue:

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

<script>
    var snd = new Audio("/Content/mysound.wav"); 
</script>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)