step 06 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...
HTML audio Tag
https://www.w3schools.com/tags/tag_au...
Audio pause() Method
https://www.w3schools.com/jsref/met_a...
HTML Audio/Video DOM ended Event
https://www.w3schools.com/tags/av_eve...
JavaScript Events
https://www.w3schools.com/js/js_event...
JavaScript Functions
https://www.w3schools.com/js/js_funct...
JavaScript Statements
https://www.w3schools.com/js/js_state...
Auf dieser Seite können Sie das Online-Video step 06 simple javascript toggle audio mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Russell Prior 24 März 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 87 Mal angesehen und es wurde von 1 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
