LESSON 1 Lesson Title

Audio Button Examples

Here is some text with an audio button. If you look at the code, you'll see that each audio button and its associated paragraph are contained inside a div with the class 'list-item.' You'll also notice a comment in the code indicating that a div with id 'audio-list' starts the playable content. The 'audio-list' div can also contain non-audio content—it's just a giant container that tells our JavaScript, “Hey! There are audio items in here somewhere.”

For example, this paragraph isn't associated with any 'list-item' content. It's nested inside the 'audio-list' div, but is not an audio list item. This is OK!

Here's another audio button, just for fun.

Now, you might run into a situation where the manuscript indicates that an audio button will play audio for two or three paragraphs. Don't try to cram all that text inside the 'list-item' div; it isn't necessary, and you'll have to do sad, hacky things to your code to make it work. Just set the first paragraph inside the span with class 'narration,' close the 'list-item' div, and carry on with paragraph tags for the rest.

As you can see, some of the headers are little banner-looking things. I've collected them on another page, but wanted to introduce you to the idea early.