React Native。流或文件的MP3二进制字符串(Uint8Array(9549))

Question

我正在尝试播放Amazon Polly返回的二进制字符串格式的音频文件。为此，我使用了'react-native-fetch-blob‘并读取了一个流，但一直收到来自桥的错误提示’无效的数据消息-所有内容都必须是长度: 8‘。它发生在我试图打开流的时候：ifstream.open()

代码如下：

//polly config
const params = {
    LexiconNames: [], 
    OutputFormat: "mp3", 
    SampleRate: "8000", 
    Text: "All Gaul is divided into three parts", 
    TextType: "text", 
    VoiceId: "Joanna"
};

Polly.synthesizeSpeech(params, function(err, data) {
    let _data = "";
    RNFetchBlob.fs.readStream(
        // file path
        data.AudioStream,
        // encoding, should be one of `base64`, `utf8`, `ascii`
        'ascii'
    )
    .then((ifstream) => {
        ifstream.open()
        ifstream.onData((chunk) => {
            _data += chunk
        })
        ifstream.onError((err) => {
            console.log('oops', err.toString())
        })
        ifstream.onEnd(() => {  
            //pasing _data to streaming player or normal audio player
            ReactNativeAudioStreaming.play(_data, {showIniOSMediaCenter: true, showInAndroidNotifications: true});
        })  
    })
}); 

我也尝试过的另一个解决方案是将流保存到一个文件中，以便稍后加载它，但我得到了类似的错误。RNFetchBlob.fs.createFile("myfile.mp3", dataG.AudioStream, 'ascii');

提前致谢

Answer 1

您可以使用fetch()来请求一个或多个媒体资源，从.then()返回Response.body.getReader()来获取响应的ReadableStream。读取作为流返回的Uint8Array值，使用ReadableStream的.read()方法读取，并将值追加到MediaSource的SourceBuffer，以在HTMLMediaElement上流式传输媒体。

例如，依次输出两个所请求的音频资源的音频

window.addEventListener("load", () => {

  const audio = document.createElement("audio");

  audio.controls = "controls";

  document.body.appendChild(audio);

  audio.addEventListener("canplay", e => {
    audio.play();
  });

  const words = ["hello", "world"];

  const mediaSource = new MediaSource();

  const mimeCodec = "audio/mpeg";

  const mediaType = ".mp3";

  const url = "https://ssl.gstatic.com/dictionary/static/sounds/de/0/";

  Promise.all(
      words.map(word =>
        fetch(`https://query.yahooapis.com/v1/public/yql?q=select * from data.uri where url="${url}${word}${mediaType}"&format=json&callback=`)
        .then(response => response.json())
        .then(({
            query: {
              results: {
                url
              }
            }
          }) =>
          fetch(url).then(response => response.body.getReader())
          .then(readers => readers)
        )
      )
    )
    .then(readers => {

      audio.src = URL.createObjectURL(mediaSource);
      mediaSource.addEventListener("sourceopen", sourceOpen);

      async function sourceOpen() {
        var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        // set `sourceBuffer` `.mode` to `"sequence"`
        sourceBuffer.mode = "segments";

        const processStream = ({
          done,
          value
        }) => {
          if (done) {
            return;
          }
          // append chunk of stream to `sourceBuffer`
          sourceBuffer.appendBuffer(value);
        }
        // at `sourceBuffer` `updateend` call `reader.read()`,
        // to read next chunk of stream, append chunk to 
        // `sourceBuffer`
        for (let [index, reader] of Object.entries(readers)) {
          sourceBuffer.addEventListener("updateend", function() {
            reader.read().then(processStream);
          });

          let stream = await reader.read().then(processStream)
            .then(() => reader.closed)
            .then(() => "done reading stream " + index);

          console.log(stream);
        }

      }
    })
}) 

plnkr http://plnkr.co/edit/9zHwmcdG3UKYMghD0w3q?p=preview

Answer 2

您可以使用AWS.Polly.Presigner中的getSynthesizeSpeechUrl方法。我这样做并使用react-native-sound来播放mp3。我遇到了一个问题，mp3不能播放，因为我的预签名URL包含特殊字符，但有一个fix here。