step 09 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