De PHPhulp kroeg
Audioplayer
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)
Gewijzigd op 16/04/2023 04:05:52 door G P
1. Al je vars bovenin het script zijn nu global. Het is netter om de scope niet groter dan nodig te maken, bijvoorbeeld zo:
Code (php)
1
2
3
2
3
document.addEventListener('DOMContentLoaded', () => {
// your entire script here
});
// 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:
Code (php)
1
2
2
const INPUT_EMAIL = document.querySelector('.email');
const HREFS_CANCEL = document.querySelectorAll('.cancel');
const HREFS_CANCEL = document.querySelectorAll('.cancel');
3. In je HTML koppel je de JavaScript functions rechtstreeks aan de elementen, bijvoorbeeld zo:
Code (php)
1
<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)
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.
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
Gewijzigd op 15/04/2023 11:18:00 door Jan R
@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.
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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>
<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>
Je geeft al meteen een mooi voorbeeld voor het gebruik van een addEventListener !
Super van jou :)
Dit topic is gesloten.