Explorer
project
bells.mp3
hint.md
index.css
index.html
index.js
jbr.mp3
Dependencies
Bootcamp
Study group
Collaborate with peers in your dedicated #study-group channel.
Code reviews
Submit projects for review using the /review
command in your #code-reviews channel
const body = document.querySelector('body')
const playBtn = document.getElementById("play-btn")
const pauseBtn = document.getElementById("pause-btn")
const stopBtn = document.getElementById("stop-btn")
const forwardBtn = document.getElementById('forward-btn')
const previousBtn = document.getElementById('previous-btn')
const greeting = document.getElementById('greeting')
const actualSongInput = new Audio('./bells.mp3')
const nowPlaying = document.getElementById('current-song-text')
// renders top greeting message and changes letter color for every other letter
const renderGreeting = (greetingMsg) => {
const string = greetingMsg
for (let i = 0; i < string.length; i++) {
let str = string[i]
let textElement = document.createElement('span')
greeting.appendChild(textElement)
textElement.textContent = str
textElement.style.color = i % 2 ? 'rgba(255,234,230,255)' : 'rgba(128,222,144,255)'
}
}
// renders the song playlist
let songCompilation = [
{
name: "Jingle Bell Rock",
path: "./jbr.mp3"
},
{
name: "First Noel R&B",
path: "https://www.freexmasmp3.com/files/first-noel-r&b.mp3"
},
{
name: "Bethlehem Jazz",
path: "https://www.freexmasmp3.com/files/bethlem-jazz.mp3"
},
{
name: "Scrimba Bells",
path: "./bells.mp3"
}
]
// create audio element via pure js
// set current index to 0 (or the first song)
let currentSong = document.createElement('audio')
let currentSong_index = 0;
// this method takes in an index number,
// sets the audio element src created by pure js,
// and loads the src prior to playing
const loadSong = (index) => {
currentSong.src = songCompilation[index].path
currentSong.load()
body.style.background = index % 2 ? "var(--light-green)" : "var(--blue)"
}
// load song with the current index on render
loadSong(currentSong_index)
// the song will start playing once button is hit;
// this function takes in the current song
const playAudio = (audioSrc) => {
audioSrc.currentTime = 0
audioSrc.play()
nowPlaying.textContent = " 🎅 Now Playing: " + songCompilation[currentSong_index].name + "🎅"
}
// controlling the the song index based on current index
// reloading the song with the returned new song index,
// play song
const nextSong = (audioSrc) => {
if (currentSong_index < songCompilation.length -1) {
currentSong_index++
} else {
currentSong_index = 0
}
loadSong(currentSong_index) // reloading song based on new current index
playAudio(audioSrc) // play the current song directly since current song is being changed in loadsrc
}
const prevSong = (audioSrc) => {
// comparing current placement with total amount of songs
if (currentSong_index > 0) {
currentSong_index = currentSong_index - 1
} else {
currentSong_index = songCompilation.length - 1
}
// load new song with updated index
loadSong(currentSong_index)
// play song with new index attached after loading
playAudio(audioSrc)
}
const pauseAudio = (audioSrc) => {
console.log('Pausing temporarily')
audioSrc.pause()
}
const stopAudio = (audioSrc) => {
audioSrc.pause()
audioSrc.currentTime = 0
}
// controls the volume
const volumeControl = document.getElementById('volume-control')
volumeControl.oninput = (e) => {
currentSong.volume = e.currentTarget.value / 100
}
// if the song ends on it's own, this will render the next song
currentSong.onended = () => {nextSong()}
// connecting methods to their corresponding buttons
previousBtn.onclick = () => {prevSong(currentSong)}
playBtn.onclick = () => {playAudio(currentSong)}
pauseBtn.onclick = () => {pauseAudio(currentSong)}
stopBtn.onclick = () => {stopAudio(currentSong)}
forwardBtn.onclick = () => {nextSong(currentSong)}
// renders the greeting on top of the page
renderGreeting('Merry Christmas!')