The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Simple Audio Element Play Button

TODO: Pull subtitle into page object


Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Simple Audio Element Play Button

This is a basic start stop button that plays an
audio clip. 

-- html
-- show

<figure class="audioWrapper">
  <audio id="audioSample" preload="auto">
  <button id="audioPlayButton">Play</button>

-- script
-- show

const init = () => {
  audioPlayButton.addEventListener("click", () => {
    if (!audioSample.paused) {
      audioSample.currentTime = 0
      audioPlayButton.innerText = "Play"
    } else {
      audioPlayButton.innerText = "Stop"

  audioSample.addEventListener("ended", () => {
      audioPlayButton.innerText = "Play"

document.addEventListener("DOMContentLoaded", init)

-- notes

- This example is designed for short clips that
don't need a pause feature that allows for play
to be restarted wherever it was stopped

- A "Stop" feature is included. It can be removed
if the clip is short enough that it doesn't
benefit much from it

- If the click is long enough to warrant a 
Stop feature it's worth considering adding
play/pause functionality too

- The button starts displaying the word "Play"

- The audio plays when the button is clicked

- The text of the button also changes to "Stop"
when the button is clicked

- Clicking the button again while the audio is
playing (and displaying "Stop") stops the audio
and changes the text back to "Play" which
can then be used to play the audio again

- Clicking "Stop" resets the play-head to the 
beginning of the audio so the track starts
from the beginning on the next play 

- The text of the audio in the example is
"Hello, my name is Tom. I am an American 
English voice"

-- categories
-- JavaScript 
-- HTML 

-- metadata
-- date: 2023-10-03 19:44:13
-- id: 2wh5r4de
-- site: aws
-- type: post
-- status: draft