WordPress Music Player
Che cosa cerchiamo?
Cerchiamo di convertire un player musicale scritto in HTML, CSS e Javascript.
Vogliamo riuscire a convertire questo player in Plugin per Wordpress.
Il player è perfettamente funzionante, tutte le funzioni di controllo (Javascript) sono già state scritte, sono già previsti anche tutto lo scheletro e la grafica del player (CSS e HTML).
Pagina impostazioni plugin
Servirebbe anche la sezione della pagina che permette all'utente di utilizzare questo Plugin.
Esempio di pagina settings:
La pagina deve permettere per esempio:
Cambiamento colori player.
Ridimensionamento player.
Caricamento canzoni (titolo, immagine, mp3 ecc).
Alterare la grafica del plugin.
Altre impostazioni da definire.
Codice plugin Javascript
// player
var music = document.querySelector('.music-element') var music_second = document.getElementById('tuned-song') var playBtn = document.querySelector('.play')
var seekbar = document.querySelector('.seekbar') var currentTime = document.querySelector('.current-time') var duration = document.querySelector('.duration') var rotateImage = document.getElementById("detectRotation");
function handlePlay() {
if (music.paused || music_second.paused) { music.play();
music_second.play();
if(music_second.muted || music.muted) music_second.muted = false;
else
music_second.muted = true;
rotateImage.classList.add("rotate");
playBtn.classList.add("pause");
playBtn.classList.remove("play");
playBtn.innerHTML = '<i class="material-icons">pause</i>' } else {
music.pause();
music_second.pause();
if(music_second.muted || music.muted) music_second.muted = false;
else
music_second.muted = true;
rotateImage.classList.remove("rotate");
playBtn.classList.add("play");
playBtn.classList.remove("pause");
playBtn.innerHTML = '<i class="material-icons">play_arrow</i>' }
music.addEventListener('ended', function () { playBtn.classList.add("play");
playBtn.classList.remove("pause");
playBtn.innerHTML = '<i class="material-icons">play_arrow</i>' music.currentTime = 0
music_second.currentTime = 0 });
}
music.onloadeddata = function () { seekbar.max = music.duration var ds = parseInt(music.duration % 60) var dm = parseInt((music.duration / 60) % 60) if(ds < 10){
duration.innerHTML = dm + ':0' + ds }
else{
duration.innerHTML = dm + ':' + ds }
}
music.ontimeupdate = function () { seekbar.value = music.currentTime }
handleSeekBar = function () { music.currentTime = seekbar.value; music_second.currentTime = seekbar.value; } music.addEventListener('timeupdate', function () {
var cs = parseInt(music.currentTime % 60) var cm = parseInt((music.currentTime / 60) % 60) if(cs < 10){
currentTime.innerHTML = cm + ':0' + cs }
else{
currentTime.innerHTML = cm + ':' + cs }
}, false)
// volume
var volIcon = document.querySelector('.volume') var volBox = document.querySelector('.volume-box') var volumeRange = document.querySelector('.volume-range') var volumeDown = document.querySelector('.volume-down') var volumeUp = document.querySelector('.volume-up')
function handleVolume() {
volIcon.classList.toggle('active') volBox.classList.toggle('active') }
volumeDown.addEventListener('click', handleVolumeDown);
volumeUp.addEventListener('click', handleVolumeUp);
function handleVolumeDown() {
volumeRange.value = Number(volumeRange.value) - 20 music.volume = volumeRange.value / 100
music_second.volume = volumeRange.value / 100 }
function handleVolumeUp() {
volumeRange.value = Number(volumeRange.value) + 20 music.volume = volumeRange.value / 100
music_second.volume = volumeRange.value / 100 }
// Carousell functions
function Collab(nameCollab,nameSong,urlSong,logoCollab,urlSongNoTune) { this.NameCollab=nameCollab;
this.NameSong=nameSong;
this.UrlSong=urlSong;
this.LogoCollab=logoCollab;
this.UrlSongNoTune = urlSongNoTune;
}
const collabName = document.getElementById("nameCollab");
const collabLogo = document.getElementById('logoCollab');
const collabSong = document.getElementById('songBro');
// Da non toccare, gestione carosello
const rightBtn = document.getElementById('right-btn');
const leftBtn = document.getElementById('left-btn');
const color_player = document.getElementById("music-player-container");
const color_right_container = document.getElementById("right-container");
const color_play = document.getElementById("play");
// const color_pause = document.getElementById("pause");
const color_forward = document.getElementById("left-btn");
const color_rewind = document.getElementById("right-btn");
// Images are from unsplash var collabs = [
new Collab("Sony","2","https://www.mboxdrive.com/tory-before-scloudtomp3downloader.com.mp3","https://upload.wikimedia.org/wikipedia/en new Collab("Warner",2,3,"https://logowiki.net/wp-content/uploads/imgp/Warner-Music-Benelux-Logo-1-4592.png"),
new Collab("Atlantic",2,3,"https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Atlantic_Records_box_logo_%28colored%29.svg/1200p new Collab("Universal",2,3,"https://www.nikolasalbanese.it/wp-content/uploads/2018/11/UNIVERSAL-MUSIC-GROUP-vector-logo.png"), new Collab("Media Roncalli",2,3,"https://mir-s3-cdn-cf.behance.net/projects/404/fdf18a97402313.Y3JvcCw0OTIxLDM4NDksMCwxNTcx.jpg")];
console.log(collabs[0].LogoCollab);
console.log(collabs[0].NameCollab);
collabName.innerHTML = collabs[0].NameCollab;
collabLogo.src = collabs[0].LogoCollab;
collabSong.src = collabs[0].UrlSong;
// https://www.mboxdrive.com/tory-after-scloudtomp3downloader.com.mp3 let position = 0;
const moveRight = () => {
if (position >= collabs.length - 1) { position = 0
collabName.innerHTML = collabs[position].NameCollab;
collabLogo.src = collabs[position].LogoCollab;
return;
}
collabName.innerHTML = collabs[position + 1].NameCollab;
collabLogo.src = collabs[position + 1].LogoCollab;
position++;
}
const moveLeft = () => { if (position < 1) {
position = collabs.length - 1;
collabName.innerHTML = collabs[position].NameCollab;
collabLogo.src = collabs[position].LogoCollab;
return;
}
collabName.innerHTML = collabs[position - 1].NameCollab;
collabLogo.src = collabs[position - 1].LogoCollab;
position--;
}
rightBtn.addEventListener("click", moveRight);
leftBtn.addEventListener("click", moveLeft);
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Music Carousel Player</title>
</head>
<body>
<main>
<!-- <h1>Music Player</h1> -->
<!-- <button id="left-btn"><i class="arrow"></i></button> -->
<div class="container">
<!-- <span id="nameCollab"></span>
<div class="logoCollab">
<img id="logoCollab" src="" alt="">
</div> -->
<div class="left-container">
<div class="switch-toggle">
<label>
<input onClick="tuneIt()" type="checkbox">
<span></span>
</label>
</div>
<div id="music-player-container" class="music-player-container">
<img id="detectRotation" class="music-player" src="https://www.lastampa.it/image/contentid/policy:1.40772280:16333
<div class="white-dot"></div>
</div>
<div class="player margino">
<div class="info margino">
<div id="nameCollab" class="title">Angelo Caduto</div>
<div class="singer">Salmo - Flop</div>
</div>
<div class="volume-box margino">
<span class="volume-down"><i class="material-icons">remove</i></span>
<input type="range" class="volume-range" step="1" value="80" min="0" max="100"
oninput="music.volume = this.value/100">
<span class="volume-up"><i class="material-icons">add</i></span>
</div>
<div class="btn-box margino">
<i class="material-icons volume" onclick="handleVolume()">volume_up</i>
</div>
<div class="music-box margino">
<input type="range" step="1" class="seekbar" value="0" min="0" max="100" oninput="handleSeekBar()">
<audio id="tuned-song">
<source src="https://www.mboxdrive.com/tory-after-scloudtomp3downloader.com.mp3" type="audio/mp3">
</audio>
<audio id="songBro" class="music-element">
<source src="" type="audio/mp3">
</audio>
<span style="margin-bottom: 10px;" class="current-time">0:00</span>
<div style="display: flex;flex-direction: row;align-items: center;">
<span id="left-btn" class="forward">
<i class="material-icons">fast_rewind</i>
</span>
<span id="play" class="play" onclick="handlePlay()">
<i class="material-icons">play_arrow</i>
</span>
<span id="right-btn" class="rewind">
<i class="material-icons">fast_forward</i>
</span>
</div>
</div>
</div>
</div>
<div id="right-container" class="right-container">
<!-- Second Part -->
<div class="label">
<img id="logoCollab" class="labelContainer" src="https://www.universalmusic.com/wp-content/uploads/2015/09/univer </div>
</div>
</div>
<!-- <button id="right-btn"><i class="arrow"></i></button> -->
</main>
<script src="controller.js"></script>
<script src="https://unpkg.com/wavesurfer.js"></script>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
}
body {
font-family: "Roboto", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h1 {
text-align: center;
}
.logoCollab{
width: 250px;
height: 250px;
min-width: 250px;
min-height: 250px;
max-width: 250px;
max-height: 250px;
object-fit: cover;
}
.container { width: 750px;
height: 500px;
display: flex;
flex-direction: row;
justify-content: center;
border-radius: 10px;
/* box-shadow is from materialize css's website */
background-color: rgb(110, 26, 26);
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}
/* Elements from the left side */
.left-container{
margin: 0px;
padding:0px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px 0px 0px 10px;
background-color: white;
width: 60%;
}
.music-player-container{
display: flex;
margin-top: 10px;
/* align-self: center; */
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #929799;
background-image: linear-gradient(316deg, #929799 0%, #dbdbdb 74%);
-moz-box-shadow: 0 0 5px rgb(134, 133, 133);
-webkit-box-shadow: 0 0 5px rgb(134, 133, 133);
box-shadow: 0 0 5px rgb(134, 133, 133);
}
.music-player{
object-fit: cover;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
border-radius:50% ; width: 180px;
height: 180px;
min-width: 180px;
min-height: 180px;
max-width: 180px;
max-height: 180px;
} .white-dot{
position: absolute;
z-index: 2;
border-radius: 50%;
width: 25px;
height: 25px;
background-color: white;
} .rotate {
animation: rotation 18s infinite linear;
}
@keyframes rotation { from {
transform: rotate(0deg);
} to {
transform: rotate(359deg);
} }
/* End element from the left side */
/* Elements from the right side */
.right-container{
border-radius: 0px 10px 10px 0px;
background-color: #929799;
background-image: linear-gradient(316deg, #929799 0%, #dbdbdb 74%);
width: 40%;
}
*::selection {
background-color: unset;
} .player { display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input[type="range"] {
-webkit-appearance: none !important;
margin: 0px;
padding: 0px;
background: #f2eae4;
height: 5px;
width: 150px;
outline: none;
cursor: pointer;
overflow: hidden;
border-radius: 5px;
}
input[type="range"]::-ms-fill-lower { background: #f2eae4;
}
input[type="range"]::-ms-fill-upper { background: #f2eae4;
}
input[type="range"]::-moz-range-track { border: none;
background: #f2eae4;
}
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none !important;
background: #65C6F6;
height: 5px;
width: 5px;
border-radius: 50%;
box-shadow: -100vw 0 0 100vw #f7d9b9;
}
input[type="range"]::-moz-range-thumb { background: #65C6F6;
height: 8px;
width: 8px;
border-radius: 100%;
}
input[type="range"]::-ms-thumb { -webkit-appearance: none !important;
background: #65C6F6;
height: 8px;
width: 8px;
border-radius: 100%;
} .info {
/* position: absolute; */
/* left: 50%; */
width: 220px;
/* transform: translateX(-50%); */
text-align: center;
}
.info .title { font-size: 20px;
font-weight: 700;
color: #444;
margin-bottom: 2px;
}
.info .singer { font-size: 12px;
color: #72646f;
} .btn-box {
/* position: absolute; */
width: 100%;
display: flex;
justify-content: center;
}
.btn-box i {
font-size: 24px;
color: #72646f;
margin: 0 30px;
cursor: pointer;
}
.btn-box i.active { /* color: #65C6F6; */
}
.volume-box { display: none;
justify-content: center;
/* transform: translateX(-50%); */
align-items: center;
z-index: 1;
padding: 0 20px;
}
.volume-box .volume-down { left: -15px;
transform: translateY(-50%);
cursor: pointer;
color: #72646f;
}
.volume-box .volume-up { right: -15px;
transform: translateY(-50%);
cursor: pointer;
color: #72646f;
}
.volume-box .volume-up::selection { background-color: unset;
} /*
.volume-down { position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #72646f;
}
.volume-up { position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #72646f;
}
.volume-up::selection { background-color: unset;
}
*/
.volume-box input[type="range"] { height: 5px;
width: 150px;
margin: 0 0 10px 0;
}
.volume-box.active { display: block;
}
.music-box { display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.music-box input[type="range"] { height: 5px;
width: 230px;
margin: 0 0 10px 0;
}
.music-box input[type="range"]::-webkit-slider-thumb { height: 5px;
width: 7px;
}
.current-time { left: -35px;
/* transform: translateY(-50%); */
font-size: 12px;
color: #72646f;
} .duration { right: -35px;
/* transform: translateY(-50%); */
font-size: 12px;
color: #72646f;
}
.play, .pause { width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
color:white;
background-color: #929799;
background-image: linear-gradient(316deg, #929799 0%, #dbdbdb 74%);
cursor: pointer;
transition: all 0.4s;
}
.forward, .rewind { width: 30px;
margin-right:20px;
margin-left:20px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
color:white;
background-color: #929799;
background-image: linear-gradient(316deg, #929799 0%, #dbdbdb 74%);
cursor: pointer;
transition: all 0.4s;
}
.music-box .play i, .music-box .pause i { font-size: 36px;
color:white;
}
.music-box .pause i { font-size: 32px;
}
.music-box .forward i, .music-box .rewind i { font-size: 22px;
color:white;
}
.music-box .forward i { font-size: 22px;
}
.margino{
margin-top:10px;
}
.label{
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
position: absolute;
z-index:2;
width: 270px;
height: 150px;
min-width: 270px;
min-height: 150px;
max-width: 270px;
max-height: 150px;
background-color: white;
box-shadow: 0 0 5px rgb(134 133 133);
margin-top:20px;
left:50%;
}
.labelContainer{
/* object-fit: cover; */
max-width:250px;
max-height:115px;
width: auto;
height: auto;
}
.switch-toggle { position: absolute;
z-index: 2;
margin-right:355px;
display: flex;
justify-content: center;
width: auto;
display: table;
}
.switch-toggle label { width: 50px;
height: 20px;
display: flex;
justify-content: center;
position: relative;
display: block;
margin: 20px 0px;
}
.switch-toggle label span { position: absolute;
background-color: #c1c1c1;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 50px;
}
.switch-toggle label input{
visibility: hidden;
}
.switch-toggle label span:after { content: "";
position: absolute;
width: 25px;
height: 25px;
box-shadow: 0 0 5px rgb(134, 133, 133);
background-color: #ffffff;
border-radius: 100%;
top:-2px;
transition: 0.5s;
}
.switch-toggle label input:checked + span:after{
transform: translateX(30px);
}
.switch-toggle label input:checked + span { background-color: #EA65F3;
background-image: linear-gradient(316deg, #EA65F3 0%, #65C6F6 74%);
} .tune-on{
background-color: #EA65F3;
background-image: linear-gradient(316deg, #EA65F3 0%, #65C6F6 74%);
}
.sparisci{
display: hidden;
}
