This post shows how to toggle (play/pause) sound by JavaScript manipulation ofonclick event of a DOM element. Browser support of HTML5 audio tag is a must inthis example.
I'm still new to all this, but I'm trying to add audio mp3 sound to an HTML image, which is played when clicked on. How can I do this right? I've already tries a few things, like the ' tag, or installing java-based stuff, like soundmanager2, however none of them seems to work.
Source Code for Demo:
When you click on the button element, the sound will be played. If the elementis clicked again, the sound will be paused. To toggle sound like this, a HTML5audio element is embedded in the HTML document, and not displayed on screen.Every time the button element is clicked, the toggleSound function will beexecuted. The toggleSound function checks if the audio element is paused.If the audio element is paused, call play() to play sound. Otherwise callpause() to stop playing.
References:
The audio tag used in HTML is relatively new. It hasn't been around forever. In fact, prior to this tag created with HTML5, HTML could not be used to play audio. Instead, an audio player would have to be used. Now, with HTML5, with the audio tag, audio files can be played with HTML. The browsers that support the rendering of the HTML5 audio tag. Since we will be using HTML5 to insert the audio player, your page will need to be in that version of HTML. If it is in an earlier version, such as XHTML 1.0 or HTML 4.01, you will need to change its DOCTYPE or DTD to ' 
| [1] | HTML Audio/Video DOM Reference |
| [3] | Introduction to the HTML5 audio tag javascript manipulation |
| [4] | [JavaScript] Play Sound on Click Event of DOM Element |
| [5] | [Golang] GopherJS DOM Example - Play Sound on Click Event |
| [6] | [Golang] GopherJS DOM Example - Toggle (Play/Pause) Sound on Click Event |
This post shows how to toggle (play/pause) sound by JavaScript manipulation ofonclick event of a DOM element. Browser support of HTML5 audio tag is a must inthis example.
Source Code for Demo:
When you click on the button element, the sound will be played. If the elementis clicked again, the sound will be paused. To toggle sound like this, a HTML5audio element is embedded in the HTML document, and not displayed on screen.Every time the button element is clicked, the toggleSound function will beexecuted. The toggleSound function checks if the audio element is paused.If the audio element is paused, call play() to play sound. Otherwise callpause() to stop playing.
References:
Html Play Audio On Image Click Test
| [1] | HTML Audio/Video DOM Reference |
Html Play Audio On Image Click Check
Html Play Audio On Image Click
| [3] | Introduction to the HTML5 audio tag javascript manipulation |
Html Play Audio On Image Click Button
| [4] | [JavaScript] Play Sound on Click Event of DOM Element |
| [5] | [Golang] GopherJS DOM Example - Play Sound on Click Event |
Html Play Audio On Image Click Download
| [6] | [Golang] GopherJS DOM Example - Toggle (Play/Pause) Sound on Click Event |
