step 05 simple javascript toggle audio

In this video series we first add the basic HTML5 audio player to our layout. Pretty basic, no big whoop.

Second, a containing element is added to create a graphical layout for the audio controller; just a presentational approach (you know, just a thing). CSS transform and transition properties are added to create some basic animation. We then add a :hover pseudo to create interaction.

Lastly, we add javascript functions called from user evoked events (fancy way of saying we click on something to make something happen). The events are attached to images, which represent a toggle. We use a static png and an animated gif for the toggle images. The toggle is used to play and pause an audio file. A last function tests for the end of the audio file; meaning the audio file is over or at the very end. This then toggles the animated gif back to the static png.

\\\\\\ Codepen Pen //////
EX05 | Build 11 | HTML5 Audio
https://codepen.io/rapcom/pen/wvaEMEe

\\\\\\ SOURCES //////
Source for audio file
https://www.bensound.com/royalty-free-music/track/sci-fi

HTML audio Tag
https://www.w3schools.com/tags/tag_audio.asp

Audio pause() Method
https://www.w3schools.com/jsref/met_audio_pause.asp

HTML Audio/Video DOM ended Event
https://www.w3schools.com/tags/av_event_ended.asp

JavaScript Events
https://www.w3schools.com/js/js_events.asp

JavaScript Functions
https://www.w3schools.com/js/js_functions.asp

JavaScript Statements
https://www.w3schools.com/js/js_statements.asp