I need setting mp3 player script on Header

Product Support

AI-generated summary

Bank_Live is trying to set up an mp3 player script on their website’s header but is experiencing issues with it not working. dax suggests that the script works in the preview and asks for clarification on where the mp3 player should be displayed. Bank_Live shares their website link (https://eleceasy.com) and mentions it’s only for PC.

dax suspects that another JavaScript in the header-container is interfering with the mp3 player and suggests disabling it. They also wonder if the “petals” are in HTML and CSS.

dax provides a CSS solution by adding .header-container .controls {z-index: 9;} to place the petals underneath the player controls, making the buttons clickable. Bank_Live confirms that this solution works and thanks dax.

1

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

2

It works for me in the preview.
Can you show me exacty where the mp3 player should be displayed?
Can you share a link of your site?

3

for pc only

4

Try to disable the other javascript in the header-container, the one who does fly those red and pink things…
It run over the player, so the player buttons are unclickable

EDIT: are petals in Html and CSS???

5

Ok, add this in your media player CSS

.header-container .controls {z-index: 9;}

In this way your petals go under the player controls and the buttons can be clicked.

6

OH yes it work, Thank you very much @Trash :grinning: