Come creare un lettore musicale personalizzato basato su un tag audio con HTML, CSS e JS

Question

Sto provando a creare un lettore musicale personalizzato senza utilizzare il tag "controls" all'interno del tag audio. Prima di tutto, voglio creare qualcosa di simile a SCM Music Player. Non userò quello fornito da SCM, perché in qualche modo utilizza una grande quantità di spazio quando aggiunto al mio sito web, non ho capito come nasconderlo/mostrarlo dato che è tutto all'interno di un tag script, ed è davvero ha un impatto sulla velocità Y-Slow.

Ecco un'immagine di quello che mi piacerebbe creare:

E questo è quello che ho finora: https://jsfiddle.net/e13gs8qg/6/(Aggiornato)

HTML: (Aggiornato)

<audio id="player" class="mediaplayerclass"> 
    <source title="Fruity Loops Own Track Copy" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3" /> 
    <source title="Fruity Loops Own Track Copy 2" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3" /> 
</audio> 

<div class="playermenuwrapper"> 
    <button id="previoussong" class="previoussongclass"> 
     Previous 
    </button> 
    <button id="playpause" class="playpauseclass"> 
     play 
    </button> 
    <button id="nextsong" class="nextsongclass"> 
     Next 
    </button> 
    <div id="songtitle" class="titleclass"></div> 
</div> 

CSS:

.playermenuwrapper { 
    text-align:center; 
    margin: 0px auto; 
    max-width:100%; 
} 
.previoussongclass { 
    display:inline-block; 
    width:80px; 
} 

.playpauseclass { 
    display:inline-block; 
    width:80px; 
} 

.nextsongclass { 
    display:inline-block; 
    width:80px; 
} 

.mediaplayerclass { 
    display:block; 
    width:150px; 
    height:50px; 
    margin: 0px auto; 
} 
.titleclass { 
    display:inline-block; 
    text-align:center; 
    margin: 0px auto; 
    width:250px; 
} 

JS: (Aggiornato)

window.player = document.getElementById('player'); 
var playpause = document.getElementById('playpause'); 
var songtitle = document.getElementById('songtitle'); 
changesongtitle(); 
player.volume = 0.3; 

playpause.onclick = function() { 

    if (player.paused) { 
     changesongtitle(); 
     player.play(); 
     playpause.innerHTML = 'pause'; 

    } else { 
     player.pause(); 
     playpause.innerHTML = 'play'; 
     changesongtitle(); 
    } 
} 

function changesongtitle() { 

    var songtitle = document.getElementById('songtitle'); 

    if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3") { 
    songtitle.innerHTML = "Fruity Loops Own Track Copy"; 
    } 

    if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3") { 
    songtitle.innerHTML = "Fruity Loops Own Track Copy 2"; 
    } 

} 

Ho guardato molte domande su StackOverflow su questo, ma ancora non hanno trovato risposte a quello che sto cercando di fare.

• Come posso recuperare il titolo del file sorgente di riproduzione? (Aggiornato)

• Come posso codificare i tasti "destra" e "sinistra" e di modificare i file di origine?

• Come posso creare un dispositivo di scorrimento del volume?

• Come è possibile creare una linea temporale della durata corrente dell'audio in riproduzione?

• Infine, come posso visualizzare l'ora corrente e l'intera durata dell'audio riprodotto?

Come utilizzare le proprietà currentTime e durata in questo.

Answer 1

Quello che ho capito è che vuoi creare una libreria personalizzata per il tuo caso d'uso specifico. Ti suggerisco di provare Mediaelement.js. Ha un sacco di funzioni e funziona anche su quasi tutti i browser. Inoltre, alcune cose come la modifica dei brani basata su next e prev possono essere aggiunte in cima a questa libreria in quanto questa libreria è open source.

Anche io l'ho usato e creato alcune funzioni personalizzate su di esso. https://github.com/hkasera/mediaelement-markers

Ma prima di tutto questo è necessario capire come funziona l'audio o il video HTML5.Per questo io vi suggerisco di leggere i seguenti articoli:

1. http://html5doctor.com/html5-audio-the-state-of-play/
2. http://www.html5rocks.com/en/tutorials/webaudio/intro/
3. https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Cross-browser_audio_basics