2012-11-05 7 views
7

folgender Code funktioniert in Chrome (22,0), aber nicht in Safari (6,0)Laden Audio über eine Blob-URL nicht in Safari

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function onGo(e) { 
    var fr = new FileReader(); 
    var file = document.getElementById("file").files[0]; 
    fr.onload = function(e) { 
     var data = new Uint8Array(e.target.result); 
     var blob = new Blob([data], {type: 'audio/mpeg'}); 
     var audio = document.createElement('audio'); 
     audio.addEventListener('loadeddata', function(e) { 
      audio.play(); 
     }, false); 
     audio.addEventListener('error', function(e) { 
      console.log('error!', e); 
     }, false); 
     audio.src = webkitURL.createObjectURL(blob);  
    }; 
    fr.readAsArrayBuffer(file); 
} 
</script> 
</head> 
<body> 
    <input type="file" id="file" name="file" /> 
    <input type="submit" id="go" onclick="onGo()" value="Go" /> 
</body> 
</html> 

In Safari, weder Rückruf (loadeddata noch Fehler) aufgerufen. Der verwendete Inhalt ist eine MP3-Datei, die normalerweise mit Audio-Tags wiedergegeben wird. Gibt es besondere Pflege für Safari?

+0

Siehe http://stackoverflow.com/questions/4201576/html5-audio-files-fail-to-load-in-safari, die das Problem zu lösen scheint – cubitouch

Antwort

0

Manchmal kann HTML5-Audio einfach ohne ersichtlichen Grund nicht geladen werden. Wenn Sie einen Blick auf die Medienereignisse() werfen, sehen Sie ein Ereignis mit dem Namen: "onStalled". Die Definition lautet "Skript, das ausgeführt wird, wenn der Browser die Mediendaten aus welchen Gründen auch immer nicht abrufen kann" es scheint, dass es für Sie hilfreich sein sollte.

Versuchen für dieses Ereignis zu hören und die Datei, wenn nötig, mit so etwas wie das Nachladen:

audio.addEventListener('onstalled', function(e) { 
     audio.load(); 
    }, false); 

Ich hoffe, es hilft!

0

Ich habe das gleiche Problem, und ich verbringe ein paar Tage die Fehlersuche bereits. Als pwray in diesem anderen Beitrag erwähnt, erfordert Safari Dateierweiterungen für Medienanfragen:

HTML5 Audio files fail to load in Safari

Ich versuchte, meine Blob in eine Datei zu speichern, es file.mp3 benannt und Safari konnte die laden Audio auf diese Weise, aber nachdem ich die Datei umbenannt habe, um keine Erweiterung (nur "Datei") zu haben, wurde es nicht geladen. Wenn ich die URL aus der Blob in einem anderen Tab in Safari erstellt versucht:

url = webkitURL.createObjectURL(blob); 

es sofort eine Datei herunterladen als „unbekannt“, aber wenn ich versuchte, die gleiche Sache in Chrome (auch auf dem Mac), es zeigte den Inhalt der Datei im Browser (MP3-Dateien beginnen mit ID3, dann eine Reihe von nicht lesbaren Zeichen). Ich konnte noch nicht herausfinden, wie ich die URL des Klecks gemacht zwingen könnte, eine Erweiterung zu haben, weil es in der Regel wie folgt aussieht:

blob:https://example.com/a7e38943-559c-43ea-b6dd-6820b70ca1e2 

so das Ende den es wie ein Session-Variable aussieht.

Hier bin ich stecken geblieben und ich würde wirklich gerne eine Lösung von einigen klugen Menschen hier sehen. Danke, Steven

+0

Dies bietet keine Antwort auf die Frage. Sobald Sie genug [Reputation] (https://stackoverflow.com/help/whats-reputation) haben, können Sie [jeden Beitrag kommentieren] (https://stackoverflow.com/help/privileges/comment); Stattdessen [geben Sie Antworten, die keine Klärung durch den Fragesteller erfordern] (https://meta.stackexchange.com/questions/214173/why-doe-i-need-50-reputation-to-comment-what-can- i-do-stattdessen). - [Aus Bewertung] (/ review/low-quality-posts/17880680) –

+0

Sicher, aber ich wollte es zuerst als Kommentar senden und ich konnte nicht, deshalb habe ich es als Antwort gesendet, obwohl es keine Antwort ist, aber Sie können einige zusätzliche Informationen zur Fehlerbehebung bereitstellen. – Steven

+0

Also habe ich viel geforscht und es sieht so aus, als ob Safari den vom Blob gestreamten Audio einfach nicht wiedergeben kann, da Safari nach einer Erweiterung (.mp3) sucht, um die Quelle zu identifizieren, ansonsten wird "Error" angezeigt Audioelement.Nach dem Konvertieren des Blobs in eine URL mit dieser Zeile: 'audio.src = webkitURL.createObjectURL (blob);' Ihre audio.src wird wie folgt aussehen: 'blob: https: //example.com/a7e38943-559c -43ea-b6dd-6820b70ca1e2' und es hat keine Erweiterung – Steven

Verwandte Themen