Question

我有一个音频blob，我想在特定时间将其删除。我应该如何在Javascript中执行此操作？

示例：

sliceAudioBlob( audio_blob, 0, 10000 ); // Time in milliseconds [ start = 0, end = 10000 ]

注意：我不知道如何做到这一点，所以有点暗示会是真的赞赏。

更新：

我正在尝试构建一个简单的录音机，但问题是每个浏览器的持续时间存在差异，其中一些会增加几秒钟（Firefox）而其他浏览器不会（Chrome）。所以，我提出了编写一个只返回我想要的切片的方法的想法。

完整的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Audio Recorder</title>
    <style>
        audio{
            display: block;
        }
    </style>
</head>
<body>
    <button type="button" onclick="mediaRecorder.start(1000)">Start</button>
    <button type="button" onclick="mediaRecorder.stop()">Stop</button>


    <script type="text/javascript">
        var mediaRecorder = null,
            chunks = [],
            max_duration = 10000;// in milliseconds.

        function onSuccess( stream ) {

            mediaRecorder = new MediaRecorder( stream );


            mediaRecorder.ondataavailable = function( event ) {
                // chunks.length is the number of recorded seconds
                // since every chunk is 1 second duration.
                if ( chunks.length < max_duration / 1000 ) {
                    chunks.push( event.data );
                } else {
                    if (mediaRecorder.state === 'recording') {
                        mediaRecorder.stop();
                    }
                }
            }

            mediaRecorder.onstop = function() {
                var audio = document.createElement('audio'),
                    audio_blob = new Blob(chunks, {
                        'type' : 'audio/mpeg'
                    });
                audio.controls = 'controls';
                audio.autoplay = 'autoplay';
                audio.src = window.URL.createObjectURL( audio_blob );
                document.body.appendChild(audio);
            };

        }

        var onError = function(err) {
            console.log('Error: ' + err);
        }

        navigator.mediaDevices.getUserMedia({ audio: true }).then(onSuccess, onError);
    </script>
</body>
</html>

Answer 1

没有直接的方法来切片这样的音频媒体，这是因为你的文件不仅仅是声音信号：它有多个段，有一些标题等，哪个位置无法确定只需一个byteLength。就像你不能通过获取 x 第一个字节来裁剪jpeg图像。

使用Web Audio API可能会将媒体文件转换为AudioBuffer，然后根据需要转换为slicing this AudioBuffer's raw PCM data，然后将其打包回具有正确新描述符的媒体文件中，但我认为你正面临一个XY问题，如果我正确地解决了这个问题，可以通过一种简单的方法解决这个X问题。

事实上，您描述的问题是Chrome或Firefox无法从您的代码中生成10s媒体但那是因为你依靠MediaRecorder.start(timeslice)的 timeslice 参数给你一大堆完美的时间。
它不会。这个论点应该只被理解为你给浏览器提供的线索，但他们可能会施加自己的最小时间片，因此不尊重你的论点。（2.3[Methods].5.4）。

相反，如果您需要，最好使用简单的setTimeout来触发录制器的stop()方法：

start_btn.onclick = function() {
  mediaRecorder.start(); // we don't even need timeslice
  // now we'll get similar max duration in every browsers
  setTimeout(stopRecording, max_duration);
};
stop_btn.onclick = stopRecording;

function stopRecording() {
  if (mediaRecorder.state === "recording")
    mediaRecorder.stop();
};

Here is a live example using gUM hosted on jsfiddle.

使用来自Web Audio API的无声流的实时代码段，因为StackSnippet的保护功能无法与gUM良好运行...

var start_btn = document.getElementById('start'),
  stop_btn = document.getElementById('stop');

var mediaRecorder = null,
  chunks = [],
  max_duration = 10000; // in milliseconds.

start_btn.onclick = function() {
  mediaRecorder.start(); // we don't even need timeslice
  // now we'll get similar max duration in every browsers
  setTimeout(stopRecording, max_duration);
  this.disabled = !(stop_btn.disabled = false);
};
stop_btn.onclick = stopRecording;

function stopRecording() {
  if (mediaRecorder.state === "recording")
    mediaRecorder.stop();
  stop_btn.disabled = true;
};

function onSuccess(stream) {

  mediaRecorder = new MediaRecorder(stream);

  mediaRecorder.ondataavailable = function(event) {
    // simply always push here, the stop will be controlled by setTimeout
    chunks.push(event.data);
  }

  mediaRecorder.onstop = function() {
    var audio_blob = new Blob(chunks);
    var audio = new Audio(URL.createObjectURL(audio_blob));
    audio.controls = 'controls';
    document.body.appendChild(audio);
    // workaround https://crbug.com/642012
    audio.currentTime = 1e12;
    audio.onseeked = function() {
      audio.onseeked = null;
      console.log(audio.duration);
      audio.currentTime = 0;
      audio.play();
    }
  };
  start_btn.disabled = false;

}

var onError = function(err) {
  console.log('Error: ' + err);
}

onSuccess(SilentStream());

function SilentStream() {
  var ctx = new(window.AudioContext || window.webkitAudioContext),
    gain = ctx.createGain(),
    dest = ctx.createMediaStreamDestination();
  gain.connect(dest);
  return dest.stream;
}

<button id="start" disabled>start</button>
<button id="stop" disabled>stop</button>

Answer 2

在你的行中：

    <button type="button" onclick="mediaRecorder.start(1000)">Start</button>

mediaRecorder.start接收时间片作为参数。时间片指定块的大小（以毫秒为单位）。因此，为了削减音频，您应该修改您在mediaRecorder.ondataavailable

上创建的块数组

E.g：您将1000作为时间片传递，这意味着您有1秒的切片，并且您想要缩短录制的前2秒。

你只需做这样的事情：

 mediaRecorder.onstop = function() {
            //Remove first 2 seconds of the audio
            var chunksSliced = chunks.slice(2);

            var audio = document.createElement('audio'),
                // create the audio from the sliced chunk
                audio_blob = new Blob(chunksSliced, {
                    'type' : 'audio/mpeg'
                });
            audio.controls = 'controls';
            audio.autoplay = 'autoplay';
            audio.src = window.URL.createObjectURL( audio_blob );
            document.body.appendChild(audio);
        };

    }

如果需要，您可以以毫秒为单位减小块的大小。只需将不同的数字传递给start，然后将数组切片到所需的位置。

要获得更具体的答案，您可以为audioSlice执行此操作：

            const TIMESLICE = 1000;
        // @param chunks Array with the audio chunks
        // @param start where to start cutting in seconds
        // @param end where to stop cutting in seconds
        function audioSlice(chunks, start, end) {
            const timeSliceToSeconds = TIMESLICE/1000;

            const startIndex = Math.round(start / timeSliceToSeconds);
            const endIndex = Math.round(end / timeSliceToSeconds);
            if (startIndex < chunks.length && endIndex < chunks.length) {
                return chunks.slice(startIndex, endIndex)
            }
            throw Error('You cannot cut this at those points');
        }

如果您为您的值修改TIMESLICE，它将计算在几秒钟内传递的切割位置

如何在特定时间切片音频blob？

2 个答案: