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...
Nesta página do site você pode assistir ao vídeo on-line step 06 simple javascript toggle audio duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Russell Prior 24 Março 2020, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 87 vezes e gostou 1 espectadores. Boa visualização!
