Instructions
- Have fun! You can use any music that you want.
- 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.
- Include a HEAVY dose of Javascript
- The code below offers a starting point (featuring my favorite song).
<body>
<button onclick="player('https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview125/v4/7e/c9/60/7ec960a1-ef9c-d060-21e1-1ecd0cb92708/mzaf_15572485393428713675.plus.aac.p.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>
</body>
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!
Rubric
A-Level Work
- Exceptional quality, originality, and/or insight
- Fully meets criteria with no significant errors
- Polished, organized, and professional
B-Level Work
- Meets all criteria with minor issues
- Solid understanding and effort
- Good organization and presentation
C-Level Work
- Meets most criteria; notable gaps
- Basic or inconsistent understanding
- Organization or clarity needs work
Below C-Level (Not Passing)
- Disorganized, incomplete, or poor quality
- Meets few or no criteria; major errors or omissions
- Limited or no understanding and effort