Gibt es eine Möglichkeit, die Größe der Anfragen zu reduzieren, wenn <audio> mit Vorspannung auf die Verwendung von Metadaten

Ich habe ein Audio-Element auf meiner Seite, wie diese ein:Gibt es eine Möglichkeit, die Größe der Anfragen zu reduzieren, wenn <audio> mit Vorspannung auf die Verwendung von Metadaten

<audio id="audio" controls preload="metadata"> 
    <source src="/audio/episode.mp3" type="audio/mpeg"> 
    <source src="/audio/episode.ogg" type="audio/ogg"> 
    [Not supported message] 
</audio>

Ich war zufrieden mit preload wird eingestellt "metadata", weil es praktisch ist, die Länge der Datei zu sehen, und es ist gut, in der Lage zu sein, weiterzuspringen, ohne vorher auf die Play-Schaltfläche klicken zu müssen.

Aber dann habe ich festgestellt, dass in Firefox und IE diese "Metadaten" zwischen 20KB und 50KB geladen wurde. Chrome war schlechter, Laden über 1 MB. Scheint wie viel verschwendete Bandbreite für einen Zeitstempel.

Ich weiß, dass preload von Browsern als more what you'd call 'guidelines' than actual rules behandelt wird. Ich habe auch diese more in-depth article about the issue gefunden.

Gibt es Methoden, um die Größe dieser Anfragen zu reduzieren?

Was ich/Versuchte Considered

Ich versuche, habe schnell die meisten der Metadaten aus einer Datei in einem Texteditor als Test schneiden. Dies machte die Anfragen in Firefox und IE größer, aber es lässt mich optimistisch, dass es einen Weg gibt, um es positiv zu beeinflussen.

Ich habe auch darüber nachgedacht, die Länge auf der Seite einzutragen und sie mit Javascript zu setzen, aber diese Einstellungen scheinen schreibgeschützt zu sein.

Schließlich dachte ich, dass ich als letzten Ausweg eine leere Audiodatei erzeugen könnte, die genau die gleiche Länge hat, komprimiere sie auf eine so kleine Datei wie möglich und dann, wenn der Benutzer damit interagiert , tausche es gegen den echten * aus. An diesem Punkt realisierte ich, dass ich vermutlich etwas Hilfe bekommen sollte ...

* BEARBEITEN: Ich endete, dieses heraus zu versuchen! Es wird nicht für meine Seite funktionieren, aber zumindest ist es interessant. Ich habe es als Antwort unten eingefügt.

Quelle

2017-12-28 Obscerno

Werfen Sie einen Blick auf [Media Source Extension] (https://devdocs.io/dom/media_source_extensions_api). – K3N

@ K3N: Kann ich damit nur die Länge der Quelldatei laden und dann den Browser von dort übernehmen lassen, wenn der User auf play klickt? Oder bedeutet die Verwendung von Media Source Extensions, dass ich mit allem umgehen muss? Die Lernkurve verletzt mein Gehirn ein wenig, aber hoffentlich kann ich bald darüber hinaus kommen. Danke übrigens, das sieht genau so aus, wie ich es brauche! – Obscerno

Ja, MSE ist "low-level" in dem Sinne, dass Sie die meisten Aspekte des Streamen/Pufferns/Verwaltens in Ihrem Code handhaben müssen. Die Dateigröße sollte wie üblich aus der Antwort stammen (es sei denn, es handelt sich um einen tatsächlichen Stream). Sieh dir diesen Blog (https://www.wirewax.com/blog/post/building-a-media-source-html5-player/) für einen Spieler an, der auf MSE basiert. – K3N

Diese Lösung ist hacky, aber es hat eine messbare Wirkung. Indem ich die Seite anfänglich mit einem Silent-Doppelgänger geladen habe und sie dann für die echte Datei ausschaltete, wenn der Ton abgespielt wird, konnte ich beim ersten Laden der Seite einiges einsparen.

Hier sind meine durchschnittlichen Ergebnisse mit einem 10 Minuten 20 Sekunden lang mp3. Vorher und nachher:

IE: 16KB - Firefox: 43KB - Chrome: 1,4MB

IE: 15KB - Firefox: 08KB - Chrome: 34KB

On Chrome die Einsparung sind 1.36MB, more data than the full text of Crime and Punishment . Hier ist der Code:

HTML

<audio id="audio" controls preload="metadata"> 
    <source src="/silence.mp3" type="audio/mpeg"> 
</audio>

Javascript

var audio = document.getElementById("audio"); 
var time, volume, muted; 

audio.addEventListener("playing", loadAudio, false); 

function loadAudio(e) { 
    time = audio.currentTime; 
    volume = audio.volume; 
    muted = audio.muted; 
    audio.innerHTML = "<source src=\"/episode.mp3\" type=\"audio/mpeg\">"; 
    audio.setAttribute("preload", "auto"); 
    audio.load(); 
    audio.addEventListener("canplaythrough", playAudio, false); 

    e.target.removeEventListener(e.type, arguments.callee); 
}   

function playAudio(e) { 
    audio.currentTime = time; 
    audio.volume = volume; 
    audio.muted = muted; 
    audio.play(); 

    e.target.removeEventListener(e.type, arguments.callee); 
}

Dies wurde nur als Test geschrieben; es kann ziemlich verbessert werden.

Es gibt genug Nachteile dieser Methode, die ich nicht glaube, werde ich es verwenden. Dazu gehören:

Sie müssen eine stumme Kopie jeder einzelnen Audiodatei erstellen, die Sie auf diese Weise laden möchten.
Die Benutzer, die das Audio tatsächlich wiedergeben, werden beide Dateien anfordern.
Es dauert länger, bis der Ton abgespielt wird.
Die Steuerung schaltet eindeutig auf 0:00 und wieder zurück, vor allem bei der Verwendung von High-Latency-Internet wie meiner.

Das sagte, hoffentlich funktioniert diese Methode für jemanden da draußen! Zumindest hat es Spaß gemacht, damit herumzuspielen.

Quelle

2017-12-29 04:40:18 Obscerno

Gibt es eine Möglichkeit, die Größe der Anfragen zu reduzieren, wenn <audio> mit Vorspannung auf die Verwendung von Metadaten

Antwort

Verwandte Themen