使用decodeAudioData

时间：2016-10-01 10:14:41

标签： javascript html5 mobile-safari filereader web-audio

我的目标是从iPhone获取用户录制的音频，我知道iOS（10.02）不支持navigator.MediaDevices.getUserMedia，因此我看了是< / em>可以使用iPhone。

我尝试使用Media Capture从iPhone检索视频文件，然后从中提取音频，但是，这适用于Chrome，但部分适用于iOS。它似乎接受了该文件，但触发了decodeAudioData的错误回调，是否有人知道为什么会发生这种情况以及如何提取所述音频以便Web Audio API可以使用它？

iOS 10.02 decodeAudioData error

我还从我的iOS设备（5S）中提取了视频并尝试使用Chrome在桌面上播放，这很有用，这让我觉得decodeAudioData的实现方式与iOS不同，或者有些不同修剪过的文件。

我在下面设置了一个简单的例子来说明这个问题。

＆＃13;
＆＃13; 
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();

var source = audioCtx.createBufferSource();

var log = document.body.querySelector('.log');
var start = document.body.querySelector('.controls__start');
var media = document.body.querySelector('.controls__media');

function startAudio() {
  source.start(0);
}

start.addEventListener('click', startAudio, false);
start.addEventListener('touchstart', startAudio, false);

media.onchange = function() {
  var video = media.files[0];
  log.innerHTML += 'File name: ' + video.name + '<br>';
  log.innerHTML += 'File type: ' + video.type + '<br>';

  var reader = new FileReader();
  reader.readAsArrayBuffer(video);

  reader.onload = function(event) {
    var file = event.target.result;
    log.innerHTML += 'Read ' + file.byteLength + ' bytes<br>';
    decode(file);
  };

  reader.onerror = function(error) {
    log.innerHTML += 'Reader error<br>';
  };
};

function decode(file) {
  try {
    audioCtx.decodeAudioData(file,
      function(decoded) {
        log.innerHTML += 'Decoded file succesfully<br>';
        source.buffer = decoded;
        source.connect(audioCtx.destination);
      },
      function() {
        log.innerHTML += 'Decoding error<br>';
      }
    );
  } catch (e) {
    log.innerHTML += 'Decoding error: ' + e.message + '<br>';
  }
}
＆＃13; 
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #333;
  color: #fff;
}
.controls,
.log {
  width: 100%;
  max-width: 480px;
  margin: auto;
}
＆＃13; 
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div class="controls">
    <button class="controls__start">Start</button>
    <input class="controls__media" type="file" accept="video/*" capture="camcorder" />
  </div>

  <div class="log"></div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题