Exercise: Jamboree Jukebox

Instructions

  1. Have fun!  It’s music ok? You can use any music that you want.
  2. To acquire 30 second samples and thumbnail images, you can search the Itunes library with the links just below. Before you do, however, be aware that your search may yield a mixture of video (m4v) and audio (m4a)files. You want the m4a files. Figuring out which is which can be resolved by inspecting the code and looking at the audio controls for a given song, or by downloading the file and seeing which suffix you get. Typically, video files come first while the audio files tend to be further down the list. In any event,  click this link to get started.
  3. Include a HEAVY dose of Javascript
  4. The code below offers a starting point.

<button onclick=”player(‘bb.m4a’)”>play song</button>
<div id=”juke”>
</div>

<script>
let juke = document.querySelector(‘#juke’);
function player(tune){
juke.innerHTML = “<audio controls autoplay src=”+tune+ ” type=’audio/m4a’></audio>”;
}
</script>

5. From here, your job is to build out a “jukebox” using the audio files to pull your favorite songs, podcasts, etc. It does not need to be elaborate or extensive, but I do expect some good use of css to make it look nice!