How to Audio Effects in Your Website (Blogger/Wordpress)

Learn how to add custom sound effects, audios & background Musics in website either it is wordpress, blogger or any other platform

Let get Through it Step by Step:

1. Get an Effect or Audio File Ready (Preferred in .mp3 format).

2. Upload that Audio file to GitHub Repository (make sure to make it public).

3. Now inside your HTML between body tags paste the code below

 

<audio id="sfx-audio">
  <source src="https://github.com/AriusParkor/spin-wheel-audio-file/raw/refs/heads/main/multimedia_button_click_010.mp3" type="audio/mp3" preload="auto"/>
</audio>

 

4. Create a Button or Any other method that calls a Function.

 

<button class="button" onclick="onButtonClick()">Click</button>

 

5. Now on the onButtonClick() function which is called on the button click that we implemented above, Copy the code for playing the audio from below ⇓.

 

function onButtonClick() {
    	// Play the sound
        const sfxAudio = document.getElementById("sfx-audio");
        sfxAudio.play().catch(error => {
        console.log("Audio play failed:", error);
        });
        sfxAudio.currentTime = 0; // Restart audio from the beginning
        sfxAudio.play();
    
    }

 

Now after the following the steps above you will be able to create an interactive website with audio sources.

 

Text Copied to Clipboard!