I try setting mp3 player script on Header But i think is script not work. Is there any way to fix it?
CSS
.header-container {
html {
font-size: 14px;
}
body {
font-family: Myriad Set Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
width:100vw;
margin: 0;
padding: 0;
}
.mediaplayer {
background: linear-gradient(left,
rgb(70,35,15) 0%,
rgb(70,35,15) 22%,
rgb(75,30,20) 25%,
rgb(75,30,20) 47%,
rgb(78,35,25) 50%,
rgb(78,35,25) 72%,
rgb(85,45,30) 75%,
rgb(85,45,30) 100%
);
background-size: 50%;
background-repeat: repeat;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
width: auto;
max-width: 600px;
height: auto;
display: flex;
flex-direction: row;
padding: 20px;
box-sizing:border-box;
border-radius: 100px;
}
@media (max-width: 450px) {
.mediaplayer {
flex-direction: column;
border-radius: 50px;
}
}
audio {
width:0;
height:0;
position: absolute;
left:-99999px;
}
.discarea {
margin:10px;
}
@media (max-width: 450px) {
.discarea {
margin:10px auto;
}
.disc {
margin-left: 40px;
}
}
@keyframes spinDisc {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.disc {
position: relative;
display: block;
float: left;
width: 110px;
height: 110px;
background-color: #E0BF57;
border-radius: 50%;
}
.mediaplayer.play .disc {
animation: spinDisc 2s linear 0.3s infinite forwards;
}
.disc::before,
.disc::after {
content:" ";
position: absolute;
border-radius: 50%;
}
.disc::before {
background-color: #C43D40;
top: 32.5%;
left: 32.5%;
width: 35%;
height: 35%;
z-index:2;
}
.disc::after {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
background-color: #222;
background: linear-gradient(#222, #222, #444, #222, #222);
border-radius: 50%;
z-index: 1;
}
.stylus {
position: relative;
display: block;
float:left;
width: 30px;
height: 100px;
margin-left: 5px;
transform-origin: 15px 15px;
transition: transform 0.3s ease-in-out;
}
.mediaplayer.play .stylus {
transform: rotate(34deg);
}
.pivot {
position: absolute;
width:30px;
height:30px;
background-color: #69727B;
border-radius: 50%;
}
.arm {
position: absolute;
width:5px;
height:70px;
background-color: #8B949D;
top: 10px;
left: 13px;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
}
.arm::before {
content:" ";
position: absolute;
border-radius: 50%;
background-color: #ACB6BF;
top: 0px;
left: -2.5px;
width: 10px;
height: 10px;
}
.head {
position: absolute;
width: 8px;
height: 15px;
background-color: #69727B;
top:76px;
left:13px;
border-radius:3px;
transform-origin: 50% 0;
transform: rotate(30deg);
}
.controls {
margin: 10px;
display:flex;
flex-direction:column;
}
.title {
width: 85%;
box-sizing: border-box;
padding: 3px 0 3px 10px;
font-size: 1rem;
color: #7F3A2B;
background-color: beige;
border-radius: 25px;
border: rgba(245,245,70,0.4) 1px solid;
overflow:hidden;
}
@media (max-width: 450px) {
.title {
width: 100%;
text-align: center;
}
}
.buttons {
margin: 10px 0;
display:flex;
flex-direction:row;
}
.buttons button {
width: 50px;
height: 50px;
text-align: center;
border-radius: 50%;
border:none;
margin-right: 5px;
background-color: #69727B;
color: white;
outline: 0;
font-size: 1.2rem;
border-top: #bbc 2px solid;
border-left: #ccd 2px solid;
border-right: #aab 2px solid;
border-bottom: #bbc 2px solid;
}
.buttons button:hover {
cursor: pointer;
}
.buttons button i::before {
text-shadow: 0 0 20px rgba(255,255,255,0.4);
transition: text-shadow 0.3s ease;
}
.buttons button:hover i::before {
text-shadow: 0 0 20px white;
}
.mediaplayer.play .playstate {
background-color: #C63C3C;
}
.playstate .fa-pause,
.mediaplayer.play .playstate .fa-play {
display: none;
}
.mediaplayer.play .fa-pause {
display: block;
}
@media (max-width: 450px) {
.buttons button {
margin: 0 5px;
}
}
.subControls {
display: flex;
flex-direction: row;
}
@media (max-width: 450px) {
.subControls {
flex-direction: row nowrap;
justify-content: space-around;
margin-bottom: 20px;
}
}
.duration {
width: 110px;
text-align: center;
box-sizing: border-box;
padding: 3px 10px;
font-size: 1rem;
color: #7F3A2B;
background-color: beige;
border-radius: 25px;
border: rgba(245,245,70,0.4) 1px solid;
margin-right: 10px;
}
.volumeSlider {
-webkit-appearance: none;
appearance: none;
width: 80px;
background: transparent;
}
.volumeSlider:focus {
outline: none;
}
.volumeSlider::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #69727B;
cursor: pointer;
margin-top: -6px;
border-top: #bbc 2px solid;
border-left: #ccd 2px solid;
border-right: #aab 2px solid;
border-bottom: #bbc 2px solid;
}
.volumeSlider::-webkit-slider-thumb:active {
background-color: #9aa;
}
.volumeSlider::-moz-range-thumb {
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #69727B;
cursor: pointer;
margin-top: -6px;
border-top: #bbc 2px solid;
border-left: #ccd 2px solid;
border-right: #aab 2px solid;
border-bottom: #bbc 2px solid;
}
.volumeSlider::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
background-color:#8B949D;
border-radius: 4px;
margin-top: 2px;
}
.volumeSlider::-webkit-slider-runnable-track:active {
background-color: #69727B;
}
.volumeSlider::-moz-range-track {
width: 100%;
height: 8px;
cursor: pointer;
background-color:#8B949D;
border-radius: 4px;
margin-top: 2px;
}
}
Header
<div class="header-container">
<div class="mediaplayer" id="mediaPlayer">
<audio id="audioPlayer" src="https://d34x6xks9kc6p2.cloudfront.net/540997b0-a35f-4b69-86d6-b1c925c4a264/540997b0-a35f-4b69-86d6-b1c925c4a264.mp3"></audio>
<div class="discarea">
<div class="disc">
</div>
<div class="stylus">
<div class="pivot"></div>
<div class="arm"></div>
<div class="head"></div>
</div>
</div>
<div class="controls">
<span class="title" id="songTitleLabel">
LA Chill Tour
</span>
<div class="buttons">
<button id="backItem" class="back">
<i class="fa fa-backward"></i>
</button>
<button id="playState" class="playstate">
<i class="fa fa-play"></i>
<i class="fa fa-pause"></i>
</button>
<button id="stopItem" class="stop">
<i class="fa fa-stop"></i>
</button>
<button id="nextItem" class="next">
<i class="fa fa-forward"></i>
</button>
</div>
<div class="subControls">
<span class="duration" id="currentDuration">00:00</span>
<input class="volumeSlider" type="range" id="volumeSlider" min="0" max="1" step="0.01"/>
<script>
var songs = [
{
title: "LA Chill Tour ",
songURL: "https://d34x6xks9kc6p2.cloudfront.net/540997b0-a35f-4b69-86d6-b1c925c4a264/540997b0-a35f-4b69-86d6-b1c925c4a264.mp3"
},
{
title: "This is it band",
songURL: "https://d34x6xks9kc6p2.cloudfront.net/8bd0ca4f-1b57-47e9-8878-516d14196d86/8bd0ca4f-1b57-47e9-8878-516d14196d86.mp3"
},
{
title: "LA Fusion Jam",
songURL: "https://d34x6xks9kc6p2.cloudfront.net/0024ada8-e1c3-4d75-a2df-d19ea5eb6c79/0024ada8-e1c3-4d75-a2df-d19ea5eb6c79.mp3"
},
]
const playerArea = document.getElementById("mediaPlayer")
const playButton = document.getElementById("playState")
const stopButton = document.getElementById("stopItem")
const nextButton = document.getElementById("nextItem")
const prevButton = document.getElementById("backItem")
const durationLabel = document.getElementById("currentDuration")
const songTitleLabel = document.getElementById("songTitleLabel")
const audioPlayer = document.getElementById("audioPlayer")
const volumeSlider = document.getElementById("volumeSlider")
let currentIndex = 0
let dataAvailable = false
let currentLength;
let timer;
timer = setInterval(updateDurationLabel, 100)
volumeSlider.addEventListener("input", () => {
audioPlayer.volume = parseFloat(volumeSlider.value)
}, false)
playButton.addEventListener("click", () => {
playerArea.classList.toggle("play")
if (audioPlayer.paused) {
setTimeout(()=> {audioPlayer.play()}, 300)
timer = setInterval(updateDurationLabel, 100)
} else {
audioPlayer.pause()
clearInterval(timer)
}
}, false)
stopButton.addEventListener("click", () => {
playerArea.classList.remove("play")
audioPlayer.pause()
audioPlayer.currentTime = 0
updateDurationLabel()
}, false)
nextButton.addEventListener("click", () => {
dataAvailable = false
loadNext(true)
}, false)
prevButton.addEventListener("click", () => {
dataAvailable = false
loadNext(false)
}, false)
audioPlayer.addEventListener("loadeddata", () => {
dataAvailable = true
currentLength = audioPlayer.duration
});
// FUNCTIONS
// Converts time in ms to zero-padded string in seconds
function parseTime(time) {
const minutes = Math.floor(time / 60)
const seconds = Math.floor(time - minutes * 60)
const secondsZero = seconds < 10 ? "0" : ""
const minutesZero = minutes < 10 ? "0" : ""
return minutesZero + minutes.toString() + ":" + secondsZero + seconds.toString()
}
// Loads next song
function loadNext(next) {
audioPlayer.pause()
if (next) {
currentIndex = (currentIndex + 1) % songs.length
} else {
currentIndex = (currentIndex - 1) < 0 ? songs.length - 1 : currentIndex - 1
}
audioPlayer.src = songs[currentIndex].songURL
songTitleLabel.innerHTML = songs[currentIndex].title
audioPlayer.play()
}
// Updates the duration label
function updateDurationLabel(){
if (dataAvailable) {
durationLabel.innerText = parseTime(audioPlayer.currentTime) + " / " + parseTime(currentLength)
} else {
durationLabel.innerText = parseTime(audioPlayer.currentTime)
}
}
//rewind on completion
audioPlayer.addEventListener("ended", () => {
myAudio.currentTime = 0
});
</script>
</div>
</div>
</div>
</div>
for manuscript
