PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Audioplayer

Door G P op 15-04-2023 02:35 gewijzigd op 16-04-2023 04:05
3.392 views
Hallo,

ik ben even bezig geweest om het geheugen nog eens te gebruiken, niet altijd even gemakkelijk.
Hierbij laat ik jullie mijn nieuwe Audio Player eens bewonderen.

Wat kan je verwachten ?

1. Een overzicht van het liedje dat op het moment aan het spelen is.
2. Het overzicht verbergen / tonen

3. Zoeken naar een positie van het liedje
4. Terug gaan naar het vorige liedje
5. Afspelen / pauze van het liedje
6. Het liedje stoppen
7. Naar het volgend liedje

8. Automatisch afspelen aan / uit
9. Willekeurig afspelen aan / uit

10. Mute (stilte) aan / uit
11. Het volume regelen

12. (Nieuw in deze versie) Een afspeellijst
13. De afspeellijst verbergen / tonen

Bijzonderheden:
14. Volledig toegankelijk met de tab-toets
15. Ook streamings kunnen in de playlist

De broncode:
Klik op toon broncode in je browser, het is puur html

De css-file:
CSS bekijken

Javascript:
Javascript bezichtigen

En dan nu ook even de link: Audio Player 3.6

Wat wil ik verwachten ?

1. Eerlijkheid
2. Ideeën
3. Bugs / fouten

Wat nog belangrijk is...
Ik heb het zelf al getest met Google Chrome op PC
Laptop / Mobieltje / Tablet en andere browsers heb ik nog niet getest. Dus als jullie dat even doen en een ander resultaat moest te zien krijgen dan bedoeld, laat het mij dan zeker weten.

Ik hoop dat jullie toch wel tevreden gaan zijn met het resultaat.
G.P. (Günther Peeters alias Elvium)
Jan Koehoorn
15-04-2023 10:00
Het is een vrij uitgebreid script, dus ik beperk me tot een paar algemene opmerkingen:

1. Al je vars bovenin het script zijn nu global. Het is netter om de scope niet groter dan nodig te maken, bijvoorbeeld zo:

document.addEventListener('DOMContentLoaded', () => {
    // your entire script here
});

let ook op het verschil tussen "var" en "let". Om allerlei redenen heeft "let" meestal de voorkeur (moet je even op googlen)

2. Je gebruikt document.getElementByID en document.getElementsByTagname nogal eens dubbel voor dezelfde elementen. Het is efficiënter om dat bovenin je script in variabelen te stoppen (meestal met const), zodat je het maar 1 keer hoeft te doen. Mijn gewoonte (maar dat is persoonlijke voorkeur) is om const variabelen met hoofdletters te schrijven, zodat ik weet van welk type ze zijn:

const INPUT_EMAIL = document.querySelector('.email');
const HREFS_CANCEL = document.querySelectorAll('.cancel');


3. In je HTML koppel je de JavaScript functions rechtstreeks aan de elementen, bijvoorbeeld zo:

<button class="blackGradient" id="audioMute" onclick="javascript:muteSong();" title="Mute" type="button" value="Mute">?</button>

Het is netter om dat met addEventListener te doen, dan maak je het mogelijk om meerdere eventListeners per HTML element te hebben. (Bijvoorbeeld als je dit live zou zetten en je wilt dingen kunnen monitoren met Google Tag Manager)
G P
15-04-2023 10:50
Bedankt Jan, in JavaScript ben ik een echte n00b. Maar ik zal mij eens meer verdiepen in JS en zeker iets gaan doen met jouw tips.

1. De getElementByID gebruik ik om de standaard zaken uit te lezen / schrijven. (De knoppen / volume slider)
2. De getElementsByTagname om de hele playlist uit te lezen omdat ik niet op voorhand weet hoeveel liedjes er in de playlist zullen staan.
Maar ik zal zeker eens jouw tip gaan gebruiken, het lijkt mij toch veel simpeler zoals je het zegt.
Met de addEventListener en querySelectorAll zal ik eens experimenteren mits ik van JS maar 0.001% kennis van heb. Ik ben al blij dat ik zover geraakt ben.
Eerst nog uitpluizen hoe ik die "positie" van het liedje kan uitwerken.
Jan Koehoorn
15-04-2023 11:00
Wat bedoel je precies met de positie? Dat je die slider bovenin kunt verslepen en dat de song dan verder speelt vanaf die nieuwe positie?
Jan R
15-04-2023 11:07 gewijzigd op 15-04-2023 11:18
Nog een paar opmerkingen
Verouderd doctype
mp3 kunnen gedownload worden via de src code. De files zijn beschermd. baf/brein
Code eens een keer door de validator sturen. https://validator.w3.org

Jan
- Ariën -
15-04-2023 12:00
Mijn advies: Gebruik rechtenvrije muziek voor het voorbeeld.
G P
15-04-2023 16:28
@Jan Koehoorn: Dat is inderdaad wat ik bedoel
@Jan R: doctype is aangepast, hierbij is ook de style en de plaatsing van de elements aangepast. Ik heb het door de validator gehaald. Enige probleem zijn de icons in de knoppen (Icomoon, niet zo'n groot probleem)
@Ariën: De muziek is aangepast, zijn allen rechtvrij en staan ook op de website zelf en niet meer gelinkt naar een andere. Behalve de streaming natuurlijk :)

Bedankt allen voor jullie ideeën.
Jan Koehoorn
15-04-2023 21:45
G P op 15/04/2023 16:28:38

@Jan Koehoorn: Dat is inderdaad wat ik bedoel


Ok. Je kunt een audiobestand starten vanaf een bepaalde positie door de property currentTime van het audio element in te stellen:


<!DOCTYPE html>
<html>
    <head>
        <title>PHPHulp</title>
    </head>
    <body>
        <button class="play-25">25%</button>
        <button class="play-50">50%</button>
        <button class="play-75">75%</button>

        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const EL_AUDIO = new Audio('jouw-audio-file.mp3');
                const BTN_25 = document.querySelector('.play-25');
                const BTN_50 = document.querySelector('.play-50');
                const BTN_75 = document.querySelector('.play-75');

                BTN_25.addEventListener('click', () => {
                    EL_AUDIO.pause();
                    EL_AUDIO.currentTime = EL_AUDIO.duration / 4;
                    EL_AUDIO.play();
                });
                BTN_50.addEventListener('click', () => {
                    EL_AUDIO.pause();
                    EL_AUDIO.currentTime = EL_AUDIO.duration / 2;
                    EL_AUDIO.play();
                });
                BTN_75.addEventListener('click', () => {
                    EL_AUDIO.pause();
                    EL_AUDIO.currentTime = ( EL_AUDIO.duration / 4 ) * 3;
                    EL_AUDIO.play();
                });
                EL_AUDIO.addEventListener('loadeddata', () => {
                    console.log('audio element loaded');
                });
            });
        </script>
    </body>
</html>


G P
16-04-2023 01:08
Hartelijk bedankt !!
Je geeft al meteen een mooi voorbeeld voor het gebruik van een addEventListener !
Super van jou :)

Reageren

Inloggen om te reageren