Javascript 如何在特定时间分割音频块？_Javascript_Audio_Blob

Javascript 如何在特定时间分割音频块？

javascript audio

Javascript 如何在特定时间分割音频块？,javascript,audio,blob,Javascript,Audio,Blob,我有一个音频块，我想在一个特定的时间切碎它。我应该如何在Javascript中这样做示例： sliceAudioBlob( audio_blob, 0, 10000 ); // Time in milliseconds [ start = 0, end = 10000 ] <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Audio Recorde

我有一个音频块，我想在一个特定的时间切碎它。我应该如何在Javascript中这样做

示例：

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

<!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>

注意：我不知道该怎么做，所以一个小小的提示会非常有用谢谢

更新：

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

<!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>

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

完整的HTML代码：

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

<!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>


录音机
音频{
显示：块；
}
开始
停止
var mediaRecorder=null，
chunks=[]，
最大持续时间=10000；//以毫秒为单位。
函数onSuccess（流）{
mediaRecorder=新的mediaRecorder（流）；
mediaRecorder.ondataavailable=函数（事件）{
//chunks.length是记录的秒数
//因为每个区块的持续时间为1秒。
if（chunks.length<最大持续时间/1000）{
chunks.push（event.data）；
}否则{
if（mediaRecorder.state==='recording'）{
mediaRecorder.stop（）；
}
}
}
mediaRecorder.onstop=函数（）{
var audio=document.createElement（'audio'），
audio_blob=新blob（块{
“类型”：“音频/mpeg”
});
audio.controls='controls'；
audio.autoplay='autoplay'；
audio.src=window.URL.createObjectURL（audio\u blob）；
文件.正文.附件（音频）；
};
}
var onError=函数（err）{
log（'Error:'+err）；
}
navigator.mediaDevices.getUserMedia（{audio:true}）。然后（onSuccess，onError）；

在您的行中：

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

如果需要，可以在毫秒内减小块的大小。只需将不同的数字传递到

开始

，然后在需要的位置切片数组

要获得更具体的答案，您可以对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');
        }

const TIMESLICE=1000；
//@param chunks数组和音频块
//@param start在几秒钟内开始切割的位置
//@param end在几秒钟内停止切割的位置
功能音频片（块、开始、结束）{
const timeSliceToSeconds=时间片/1000；
const startIndex=数学轮（开始/时间许可秒）；
const endIndex=Math.round（end/timeSliceToSeconds）；
if（startIndex


如果修改时间片的值，它将计算以秒为单位传递时要剪切的位置
没有直接的方法来剪切这样的音频媒体，这是因为您的文件不仅仅由声音信号组成：其中有多个片段，还有一些标题等，哪一个位置不能仅仅通过一个byteLength来确定。这就好像你不能仅仅通过x第一字节来裁剪jpeg图像
可能有一些方法可以使用Web Audio API将您的媒体文件转换为，然后在使用正确的新描述符将其打包回媒体文件之前，按照您的意愿进行转换，但我认为您正面临一个X-Y问题，如果我的理解正确，有一种简单的方法可以解决这个X问题
事实上，您描述的问题是，Chrome或Firefox都无法从您的代码中生成10s媒体。

但这是因为您依赖的时间片参数为您提供了大量的完美时间。

不会的。这个论点只能理解为你给浏览器的线索，但是他们可能会强加他们自己的最小时间片，因此不尊重你的论点。（）
相反，您最好使用一个简单的setTimeout
在需要时触发记录器的stop（）
方法：
start\u btn.onclick=function（）{
mediaRecorder.start（）；//我们甚至不需要时间片
//现在，我们将在每个浏览器中获得类似的最大持续时间
设置超时（停止录制，最大持续时间）；
};
stop_btn.onclick=停止录制；
函数stopRecording（）{
如果（mediaRecorder.state==“录制”）
mediaRecorder.stop（）；
};


以及使用Web Audio API中的静默流的实时片段，因为StackSnippet的保护在gUM中运行不好

var start\u btn=document.getElementById（'start'），
stop_btn=document.getElementById（'stop'）；
var mediaRecorder=null，
chunks=[]，
最大持续时间=10000；//以毫秒为单位。
start_btn.onclick=函数（）{
mediaRecorder.start（）；//我们甚至不需要时间片
//现在，我们将在每个浏览器中获得类似的最大持续时间
设置超时（停止录制，最大持续时间）；
this.disabled=！（stop\u btn.disabled=false）；
};
stop_btn.onclick=停止录制；
函数stopRecording（）{
如果（mediaRecorder.state==“录制”）
mediaRecorder.stop（）；
stop_btn.disabled=真；
};
函数onSuccess（流）{
mediaRecorder=新的mediaRecorder（流）；
mediaRecorder.ondataavailable=函数（事件）{
//只要始终按此处，停止将由setTimeout控制
推送（事件数据）；
}
mediaRecorder.onstop=函数（）{
var audio_blob=新blob（块）；
var audio=新音频（URL.createObjectURL（audio_blob））；
audio.controls='controls'；
文件.正文.附件（音频）；
//变通办法https://crbug.com/642012
audio.currentTime=1e12；
audio.onseek=函数（）