个人中心
gpt4 book ai didi

javascript - 如何在特定时间对音频 blob 进行切片？

转载 作者：行者123 更新时间：2023-11-29 20:54:09 24 4
gpt4 key购买 nike

我有一个音频 blob，我想在特定时间将其切碎。我应该如何在 Javascript 中做到这一点？

示例:

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

Note: I have no clue how to do that, so a little hint would be really appreciated.

更新:

我正在尝试构建一个简单的录音机，但问题是每个浏览器的持续时间存在差异，其中一些会增加几秒钟 (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>

最佳答案

没有直接的方法来像那样分割音频媒体，这是因为您的文件不仅仅由声音信号组成:其中有多个片段，有一些标题等，无法确定哪个位置只是一个字节长度。这就像您不能仅通过获取其 x 个第一个字节来裁剪 jpeg 图像。

可能有一些方法可以使用 Web Audio API 将您的媒体文件转换为 AudioBuffer , 然后 slicing this AudioBuffer's raw PCM data如您所愿，然后再将其打包回具有正确新描述符的媒体文件中，但我认为您正面临 X-Y 问题，如果我得到正确答案，则有一种简单的方法可以解决此 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>

关于javascript - 如何在特定时间对音频 blob 进行切片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50191365/

24 4 0
文章推荐： javascript - 类型 'map' 上不存在属性 'AngularFireList<{}>'
文章推荐： javascript - 使用 Jasmine 测试 Javascript 函数
文章推荐： php mysql 不插入数据
文章推荐： javascript - 使用 CSRF token 缓存请求时如何减少服务 worker 缓存大小
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com