skip deel mp3
ik probeer om een deel van een mp3 in html5 tag audio over te slaan.
Ik heb 4 knoppen welke -60,-10, +10 en +60 seconden skippen of terugkeren in een mp3 bestanden.
Echter zodra de code audio.currentTime = (nu + 10); uitvoert komt er een algemene reset van het mp3-bestand
Iemand een idee hoe het wel gaat?
Jan
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
function skipseconds(sec) {
let audio = document.getElementById("audio");
let nu = audio.currentTime;
audio.currentTime = (nu + 10);// zonder nu + lukt ook niet
}
Zowel chrome als edge lukt niet.
let audio = document.getElementById("audio");
let nu = audio.currentTime;
audio.currentTime = (nu + 10);// zonder nu + lukt ook niet
}
Zowel chrome als edge lukt niet.
Het verschil zou kunnen zijn dat de eigenschap currentTime van een tag wel schrijfbaar is, maar die van een audio context niet:
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
- https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/currentTime
Wat misschien zou kunnen helpen is audio eerst pauzeren met pause(), en dan pas currentTime instellen?
Voorbeeld: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics
Even de beide codes naast elkaar gelegd met een los mp3-tje en beide werken.
Na héél veel opzoeken kwam ik bij een oplossing.
Mijn mp3-bestand is eigenlijk een php bestand welke off-root het juiste bestand zoekt (sabam en andere controle organisatie op legale muziek) Bij mij is het wel legaal maar ik mag dat dus niet verdelen.
Nu blijkt dat er toch een header te weinig in stond.
voor de volledigheid hier volgen alle headers welke ik nu gebruik.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
header('Content-type: audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3');
header('Content-Disposition: filename=' . urlencode(basename($filename)));
header('X-Pad: avoid browser bug');
header('Cache-Control: public, no-cache, must-revalidate, max-age=0');
header('Pragma: no-cache');
header('Accept-Ranges: bytes');
header('Content-Length:' . filesize($filename));
header("Content-Transfer-Encoding: binary");
header("Last-Modified: $time");
header('Content-Disposition: filename=' . urlencode(basename($filename)));
header('X-Pad: avoid browser bug');
header('Cache-Control: public, no-cache, must-revalidate, max-age=0');
header('Pragma: no-cache');
header('Accept-Ranges: bytes');
header('Content-Length:' . filesize($filename));
header("Content-Transfer-Encoding: binary");
header("Last-Modified: $time");
Welke er eigenlijk echt bij moet heb ik niet getest.
Jan
Gewijzigd op 05/12/2020 18:54:21 door Jan R