diff --git a/audio.css b/audio.css new file mode 100644 index 0000000..125c67d --- /dev/null +++ b/audio.css @@ -0,0 +1,79 @@ +#audioContainer +{ + margin-left: 25vw; + margin-right: 25vw; + margin-top: 5vh; + display: flex; + flex-direction: column; +} + +.audioPlayer +{ + background-color: rgb(43, 80, 201); + display: flex; + border: black solid 5px; + text-align: center; +} + +.playButton +{ + margin: 1vw; + height: auto; + color: black; + background-color: transparent; + border: none; +} + + +.audioSlider +{ + width: 80%; + -webkit-appearance: none; + width: 100%; + height: 10px; + background:rgb(43, 80, 201); + background-image: url("images/bar.png"); + outline: none; + -webkit-transition: .2s; + transition: opacity .2s; + overflow: hidden; + margin: auto; +} + +.audioSlider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 15px; + height: 15px; + background: #000000; + box-shadow: -100vw 0px 0px 100vw #000000; +} + +.audioSlider::-moz-range-thumb { + width: 15px; + height: 15px; + background: #000000; +} + +.audioSlider::-moz-range-progress { + width: 10px; + height: 10px; + background: #000000; +} + +.timeContainer +{ + margin: auto; + margin-left: 1vw; +} + +.durationContainer +{ + margin: auto; + margin-right: 1vw; +} + +.timeSeparator +{ + margin: auto; +} + \ No newline at end of file diff --git a/audio/goodbyeHorses.mp3 b/audio/goodbyeHorses.mp3 new file mode 100644 index 0000000..d4cb962 Binary files /dev/null and b/audio/goodbyeHorses.mp3 differ diff --git a/audio/ratsBirthdayMixtape.mp3 b/audio/ratsBirthdayMixtape.mp3 new file mode 100644 index 0000000..cb731b5 Binary files /dev/null and b/audio/ratsBirthdayMixtape.mp3 differ diff --git a/audio/twoTrucks.mp3 b/audio/twoTrucks.mp3 new file mode 100644 index 0000000..af30640 Binary files /dev/null and b/audio/twoTrucks.mp3 differ diff --git a/audioPlayer.js b/audioPlayer.js new file mode 100644 index 0000000..781e514 --- /dev/null +++ b/audioPlayer.js @@ -0,0 +1,61 @@ +const audioList = document.getElementsByClassName('audioPlayer'); +var changingSlider = false + +function convertTime(timeInSec) +{ + const minutes = Math.floor(timeInSec / 60); + const seconds = Math.floor(timeInSec % 60); + const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`; + return `${minutes}:${returnedSeconds}`; + +} + +Array.prototype.forEach.call(audioList, audio => { + // setup duration in slider and counter + audioElement = audio.getElementsByClassName("audioElement")[0]; + audioElement.addEventListener('loadedmetadata', event => { + event.target.parentElement.getElementsByClassName("audioSlider")[0].max = event.target.duration + event.target.parentElement.getElementsByClassName("durationContainer")[0].innerHTML = convertTime(event.target.duration) + }); + + // set up slider to change counter when used + audio.getElementsByClassName("audioSlider")[0].addEventListener("input", event => { + event.target.parentElement.getElementsByClassName("timeContainer")[0].innerHTML = convertTime(event.target.value) + changingSlider = true; + }) + + // set slider to change part of music playing when used + audio.getElementsByClassName("audioSlider")[0].addEventListener("change", event => { + event.target.parentElement.getElementsByClassName("audioElement")[0].currentTime = event.target.value + changingSlider = false; + }) + + // set the audio element to change the sliders value whenever its time updates + audioElement.addEventListener("timeupdate", event => { + if (changingSlider) + { + return + } + event.target.parentElement.getElementsByClassName("audioSlider")[0].value = Math.floor(event.target.currentTime) + console.log("pogging") + event.target.parentElement.getElementsByClassName("timeContainer")[0].innerHTML = convertTime(event.target.currentTime) + }) + + // set the play button + audio.getElementsByClassName("playButton")[0].addEventListener("click", event => { + if (event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].paused) + { + event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].play() + event.target.src = "images/pause.png" + } + else + { + event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].pause() + event.target.src = "images/play.png" + } + }) + +}); + + + diff --git a/images/bar.png b/images/bar.png new file mode 100644 index 0000000..4afa415 Binary files /dev/null and b/images/bar.png differ diff --git a/images/pause.png b/images/pause.png new file mode 100644 index 0000000..1cfd6f8 Binary files /dev/null and b/images/pause.png differ diff --git a/images/play.png b/images/play.png new file mode 100644 index 0000000..13edc42 Binary files /dev/null and b/images/play.png differ diff --git a/images/slider-thumb.png b/images/slider-thumb.png new file mode 100644 index 0000000..f5e7d14 Binary files /dev/null and b/images/slider-thumb.png differ diff --git a/index.html b/index.html index 825d7a0..cb42b96 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ a game composer