Sounds on clicks

Design help Custom code
1

A client of mine asked me if i could have specific sounds on click for his site. This is new to me and im not sure if this is possible in webflow. If so how do u integarte cpecific sounds on a button click?

Here is my public share link: LINK
(how to access public share link)

2

totally possible with some custom code.
https://stackoverflow.com/questions/29567580/play-a-beep-sound-on-button-click

3

I have a similar issue. Did you get any proper solution? psiphon

1 Like
4

Hello

As I was looking for a similar solution (i.e. triggering a sound on click, specifically to demo how to pronounce a specific word) I ended up on this thread and wanted to write down what worked for me, in case it can help someone else. I basically implemented one of the solutions mentioned in this stackoverflow post, specifically using a custom code embed with the following code:

<audio id="play" src="//ssl.gstatic.com/dictionary/static/pronunciation/2019-10-21/audio/hy/hyphae_en_gb_1.mp3"></audio>
<a onclick="playSound()" outline="none">
	<img src="https://uploads-ssl.webflow.com/5d4ae57dfaeb2d7f3d355cfe/5db72eba2341e6bc72a35f15_speaker.svg" width="8" alt="How do you pronounce Hyphae?" class="icon">
</a>

In my case is the sound “hyphae_en_gb_1.mp3” being played when the user clicks on the icon “speaker.svg”, you’ll have to swop those file path to what is relevant to you use case. Also, don’t forget to paste the following JS in “Project Settings> Custom Code tab>Footer code”:

<script>
	function playSound () {
		 document.getElementById('play').play();
	}
</script>
1 Like
5

Hello Chiaradesignsthings,

Thanks for your suggestion!
Do you maybe have a clonable project with your solution?

6

Hi Chiara, is it possible to use this code snipet with a standard button?
how would you go about using this method to populate several sounds across standard site elements (to be triggered by an interaction…)