- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个音频 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/
简而言之: 我怎样才能切片?也就是说,能够指定我想从多个索引(例如 y = x[(2, 5, 11)] )中提取,而不仅仅是单个索引(例如 y = x[2] )。 简单示例 : 说我有这个数据: d
是否可以在 F# 中对 Array2D 进行切片? 说,let tmp =Array2D.init 100 100 (fun x y -> x * 100 + y) 如何从 tmp 中检索某些列或某些
例如,我希望文本仅显示“此处”,但它不起作用。文本经常变化,但我需要的单词保持在固定位置。我想访问该词。 我做错了什么? function myFunction() { var x = doc
当尝试使用spring的分页或切片来迭代非常大的mongodb集合时,程序运行正常,但在某些时候下一页/切片为空,并且在调试时出现“包含未知实例的页面/切片”消息. 这是代码示例: do { Pa
有人能给我一个关于如何分割 ListView 的例子吗?我正在使用 SimpleCursorAdapter 在 ListView 中显示数据.. 我的代码是这样的。 private WordDbAda
这个问题在这里已经有了答案: C++ slicing causing leak / undefined behavior / crash (3 个答案) 关闭 8 年前。 如果我有如下代码: cla
这个问题在这里已经有了答案: Understanding slicing (38 个答案) 关闭 5 年前。 我目前有 500 行数据。我想使用前五十行,然后跳过 50 行,依此类推。我该如何继续这
为什么对一行或一列进行切片会产生“无量纲数组”?例如: import numpy as np arr = np.zeros((10,10)) print arr.shape # (10, 10) 但是
我有以下 pandas 数据框: Shortcut_Dimension_4_Code Stage_Code 10225003 2 8225003
如何通过数组为 ruby 中的散列创建切片,如下所示: info = { :key1 => "Lorem", :key2 => "something...", :key3 => "
这个问题在这里已经有了答案: regex to get all text outside of brackets (4 个答案) 关闭 5 年前。 我正在编写的这个程序接收到一个大小不同的字符串,其
我尝试使用 tf.Tensor.getitem 对张量进行切片功能如下: indices = [0, 5] data[:,:,indices] 但是我得到以下错误: TypeError: can on
这个问题在这里已经有了答案: Can I create a "view" on a Python list? (10 个答案) 关闭 7 年前。 有没有一种方法可以在 Python 3 中创建序列的
我想弄清楚如何从多维数组中获取单个维度(为了论证,假设它是二维的),我有一个多维数组: double[,] d = new double[,] { { 1, 2, 3, 4, 5 }, { 5, 4,
我有一个 std::vector。我想创建代表该 vector 切片的迭代器。我该怎么做?在伪 C++ 中: class InterestingType; void doSomething(slice
写在前面 前面的文章介绍了Go的一些基本类型,本文开始涉及Go的一些容器类型,它们都是可以包含多个元素的数据结构,如数组、切片、map 数组 数组是具有相同类型且长度固定的一组元素集合,定义的格式:v
给定一个 numpy 数组和一个 __getitem__ 类型的索引,是否有一种惯用的方法来获取数组的相应切片,总是返回一个数组而不是标量? 有效索引的示例包括:int、slice、省略号或上述的元组
我创建了一个继承自 pandas.DataFrame 的类。在此类中添加了元数据(不是添加到列中,而是添加到类实例中): class MeasurementPoint(pandas.DataFrame
我想在空间上剪切视频以生成 N x M 个文件。 例如,我想把 test.video 拆分成 NxM 的瓦片? Video tiles 最佳答案 您可以使用 ffmpeg 及其 crop filter
这是一个示例代码。比如我想拉德国 在页面加载时切片。在这段代码中,它拉取第一个切片。 无功图; var 传说; var chartData = [{ 国家:“立陶宛”, 值:260}, { 国家:“爱
我是一名优秀的程序员,十分优秀!