2014-06-05 11 views
8

Próbuję odczytać plik lokalny za pomocą właściwości FileReader readAsArrayBuffer. Odczyt jest sukcesem iw wywołaniu zwrotnym "onload" widzę obiekt bufora tablicowego w read.result. Ale bufor macierzy jest pusty. Długość jest ustawiona, ale nie dane. Jak mogę uzyskać te dane?javascript readAsArrayBuffer zwraca pusty bufor Array

Oto mój kod

<!DOCTYPE html> 
<html> 

<body> 
    <input type="file" id="file" /> 
</body> 

<script> 
    function handleFileSelect(evt) { 

     var files = evt.target.files; // FileList object 

     var selFile = files[0]; 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      console.log(e.target.result); 
     }; 

     reader.onerror = function(e) { 
      console.log(e); 
     }; 
     reader.readAsArrayBuffer(selFile); 
    } 


    document.getElementById('file').addEventListener('change', handleFileSelect, false); 
</script> 

</html> 

wyjście konsoli reader.result

e.target.result 
ArrayBuffer {} 
e.target.result.byteLength 
25312 

Czy ktoś może mi powiedzieć jak uzyskać te dane? Czy jest jakiś problem z bezpieczeństwem? Nie ma błędu, onerror nie jest wykonywany.

Od komentarzy: Czy możesz dać mi znać, jak uzyskać dostęp do zawartości bufora? Próbuję odtworzyć plik dźwiękowy za pomocą AudioContext ... Do tego potrzebowałbym danych bufora ...

+1

Dlaczego myślisz bufor jest pusty? Twój kod w rzeczywistości nie ma dostępu do zawartości bufora ani jej nie sprawdza. Może jesteś zdezorientowany przez wyjście 'console.log'? 'console.log()' nie wypisze zawartości bufora. – nmaier

+0

Dzięki Nmaier, myślałem tak samo ... ale nie wiem jak uzyskać dostęp do zawartości bufora ... Czy możesz dać mi znać, jak uzyskać dostęp do zawartości bufora? Próbuję odtworzyć plik audio przy użyciu AudioContext ... Do tego potrzebowałabym bufora danych ... Wielkie dzięki za pomoc –

+1

Używasz zdarzenia onload zamiast zdarzenia onloadend. Twój kod zadziała, jeśli zastąpisz zdarzenie onloadend. Zobacz: https://developer.mozilla.org/en-US/docs/Web/API/FileReader – seb

Odpowiedz

4

Cóż, odtwarzanie dźwięku z użyciem rzeczy AudioContext nie jest tak trudne.

  1. Skonfiguruj kontekst.
  2. Załaduj wszelkie dane do bufora (np. FileReader dla plików lokalnych, XHR dla plików zdalnych).
  3. Skonfiguruj nowe źródło i uruchom je.

W sumie coś takiego:

var context = new(window.AudioContext || window.webkitAudioContext)(); 

function playsound(raw) { 
    console.log("now playing a sound, that starts with", new Uint8Array(raw.slice(0, 10))); 
    context.decodeAudioData(raw, function (buffer) { 
     if (!buffer) { 
      console.error("failed to decode:", "buffer null"); 
      return; 
     } 
     var source = context.createBufferSource(); 
     source.buffer = buffer; 
     source.connect(context.destination); 
     source.start(0); 
     console.log("started..."); 
    }, function (error) { 
     console.error("failed to decode:", error); 
    }); 
} 

function onfilechange(then, evt) { 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     console.log(e); 
     then(e.target.result); 
    }; 
    reader.onerror = function (e) { 
     console.error(e); 
    }; 
    reader.readAsArrayBuffer(evt.target.files[0]); 
} 


document.getElementById('file') 
    .addEventListener('change', onfilechange.bind(null, playsound), false); 

Zobacz to na żywo w jsfiddle, który pracuje dla mnie w Firefox i Chrome.

Na dobre wrzuciłem console.log(new Uint8Array()), ponieważ przeglądarka zazwyczaj loguje zawartość bezpośrednio (jeśli bufor nie jest duży). Aby uzyskać informacje na temat innych rzeczy, które można wykonać za pomocą ArrayBuffer s, zobacz np. corresponding MDN documentation.

+0

Zrobiłem to samo, ale otrzymałem błąd podczas odtwarzania dźwięku ... Skrzypce, które mi dałeś, również dały ten sam błąd. Poniżej znajduje ** wyjście konsola ** 'ProgressEvent teraz odtwarzanie dźwięku, który zaczyna się Uint8Array [10] udało się rozszyfrować: null' –

+0

Może próbujesz załadować jakiś format pliku, który ISN czy jest obsługiwany? Nie wszystkie przeglądarki (na wszystkich platformach) obsługują wszystkie formaty audio. Jak już powiedziałem: przetestowałem to skrzypce w Chrome i Firefox (29 i Nightly) na OSX 10.9 i to działa dla mnie. – nmaier

+0

O nie, pojawia się problem, Próbowałem odtworzyć plik mp3 i plik OGG. Wygląda na zepsute. Pobieram z tej samej strony, gdzie próbowałem znaleźć przykłady kontekstu audio ... Próbowałem tak wielu alternatyw, myśląc o jakimś problemie z kodem, po prostu zmarnowałem cały dzień ... Spróbuję zagrać w inne plik i sprawdź czy działa ... –

7

Oto jak czytać bufor tablicy i przekształcić go w ciąg binarny,

function onfilechange(evt) { 
var reader = new FileReader(); 
reader.onload = function(evt) { 
    var chars = new Uint8Array(evt.target.result); 
    var CHUNK_SIZE = 0x8000; 
    var index = 0; 
    var length = chars.length; 
    var result = ''; 
    var slice; 
    while (index < length) { 
    slice = chars.subarray(index, Math.min(index + CHUNK_SIZE, length)); 
    result += String.fromCharCode.apply(null, slice); 
    index += CHUNK_SIZE; 
    } 
    // Here you have file content as Binary String in result var 
}; 
reader.readAsArrayBuffer(evt.target.files[0]); 
} 

Jeśli próbujesz drukować ArrayBuffer poprzez console.log zawsze masz pusty obiekt {}

+0

Jak przekonwertować ciąg binarny na bufor tablicy –