Tworzenie niestandardowego odtwarzacza muzycznego opartego na znaczniku dźwiękowym za pomocą HTML, CSS i JS

Question

Próbuję utworzyć niestandardowy odtwarzacz muzyki bez użycia znacznika "controls" w znaczniku audio. Przede wszystkim chcę stworzyć coś podobnego do SCM Music Player. Nie użyję tego dostarczonego przez SCM, ponieważ w jakiś sposób wykorzystuje dużą ilość miejsca po dodaniu do mojej witryny, nie wymyśliłem, jak to ukryć/pokazać, ponieważ wszystko jest w tagu skryptu, i to naprawdę ma wpływ na prędkość Y-Slow.

Oto obraz tego, co chciałbym utworzyć:

I to jest to, co mam do tej pory: https://jsfiddle.net/e13gs8qg/6/(Aktualizacja)

HTML: (Aktualizacja)

<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: (Aktualizacja)

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"; 
    } 

} 

Mam spojrzał na wiele pytań na StackOverflow na ten temat, ale nadal nie znalazłem odpowiedzi na to, co usiłuję zrobić.

• Jak mogę odzyskać tytuł pliku źródłowego gry? (Aktualizacja)

• Jak mogę kodować „w lewo” i „prawo” przycisków, aby zmienić pliki źródłowe?

• Jak utworzyć suwak głośności?

• Jak utworzyć oś czasu dla bieżącego czasu trwania odtwarzanego dźwięku?

• Wreszcie, jak mogę wyświetlić aktualny czas i pełny czas odtwarzanego dźwięku?

Sposób korzystania z właściwości currentTime i duration w tym zakresie.

Answer 1

Rozumiem, że chcesz utworzyć niestandardową bibliotekę dla konkretnego przypadku użycia. Proponuję wypróbować Mediaelement.js. Ma wiele funkcji, a także działa na prawie wszystkich przeglądarkach. Ponadto, na początku tej biblioteki można dodać kilka rzeczy, takich jak zmiana utworów na podstawie następnej i poprzedniej, ponieważ ta biblioteka jest open source.

Nawet ja użyłem go i stworzył na nim kilka niestandardowych funkcji. https://github.com/hkasera/mediaelement-markers

Przedtem jednak trzeba zrozumieć, jak działa audio lub wideo HTML5.Do tego proponuję Ci przeczytać następujące artykuły:

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