Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >HTML5中的音频数据流

HTML5中的音频数据流
EN

Stack Overflow用户
提问于 2011-07-06 08:46:19
回答 2查看 18.6K关注 0票数 17

我正在从服务器接收小块的PCM音频数据,并将它们存储在一个数组中。现在,我想使用一些HTML5功能按顺序播放这些音频块,没有间隙。我认为“可能”的解决方案有两个:

Data URI

  1. HTML5音频标签

当我研究这些选项时,请向我推荐任何其他选项或对我正在考虑的两个选项的看法。虽然跨平台解决方案将是最好的,但我可以满足于Chrome唯一的解决方案,因为

EN

回答 2

Stack Overflow用户

发布于 2011-08-28 01:50:40

安排音频是Web audio API的设计目标。如果您将解码的PCM音频块作为类型化数组(AUDIO_CHUNKS),则可以使用noteOn()为每个块创建音频缓冲区,并在准确的时间(一个接一个)调度它们。类似于:

代码语言:javascript
运行
AI代码解释
复制
var startTime = 0;

for (var i = 0, audioChunk; audioChunk = AUDIO_CHUNKS[i]; ++i) {
  // Create/set audio buffer for each chunk
  var audioBuffer = audioCtx.createBuffer(NUM_CHANNELS, NUM_SAMPLES, SAMPLE_RATE);
  audioBuffer.getChannelData(0).set(audioChunk);

  var source = audioCtx.createBufferSource();
  source.buffer = audioBuffer;
  source.noteOn(startTime);
  source.connect(audioCtx.destination);

  startTime += audioBuffer.duration;
}
票数 20
EN

Stack Overflow用户

发布于 2011-08-05 11:49:31

选项1可能不起作用,因为音频标签不能播放原始音频数据(我假设这就是您所说的PCM音频数据,或者我错了?)。每个浏览器都需要特定的编解码器。在音频标签的顶部播放没有间隙的东西是完全不可靠的。

选项2可能行得通。web音频api包含的缓冲区可能会填充原始数据并播放,但我从未尝试过这样做。现在最大的缺点是: a.只有Chrome;b.用户需要通过输入about:flag来配置chrome,并启用Web Audio,这可能会让一些人感到害怕。

第三种选择是音频数据API,这是一种折衷方案。我自己从来没有试过,但从规格来看,它看起来就是你想要的。我不知道如何实现,所以你必须自己做一些研究:) https://wiki.mozilla.org/Audio_Data_API#Writing_Audio

请不要因为我在脑海中给出了这些答案,而且我对HTML5音频还很陌生。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6593738

复制
相关文章
HTML5音频audio详解
直到现在,仍然不存在一项旨在网页上播放音频的标准。 目前,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 audio 元素来包含音频的标准方法。 audio 元素能够播放声音文件或者音频流。
业余草
2019/01/21
3.1K0
HTML5视频与音频
简单介绍 HTML5 对视频和音频特性规范文档的制定是被讨论最多的。除浏览器自带支持的明显好处外,评论点集中在浏览器提供商对音频/视频格式 的不同选择。如果你准备使用HTML5的
踏浪
2019/07/31
2.1K0
第181天:HTML5——视频、音频
一、HTML5新增的video、source标签 1 <video width="320" height="240" controls="controls“ poster="/images/w3school.gif"> 2 <source src="movie.ogg" type="video/ogg"> 3 <source src="movie.mp4" type="video/mp4"> 4 您的浏览器不支持video标签 5 </video> 二、HTML
半指温柔乐
2018/09/11
1.2K0
第181天:HTML5——视频、音频
HTML5 视音频发展史
HTML5 视音频发展史 HTML5学堂:在Flash与HTML5的争霸当中,最终Flash败北,而能够替代Flash播放器功能的就是HTML5中的视音频功能。本文介绍了HTML5出现前后,实现视音频方法的变化以及视音频的编码格式。 早期实现视音频的方法 在网页当中,早期的视音频标签通常采用embed和object两种标签嵌套。之所以采用这种方式,主要与两种标签的支持程度有关。 对于embed标签,大部分的浏览器都能够支持,但是并没有纳入到W3C标准当中,而object标签,虽然得到了W3C标准的支持,
HTML5学堂
2018/03/12
1.4K0
HTML5 视音频发展史
Html5音频和视频播放示例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>html5中的音频和视频</title> </head> <body> <!--html4中的音频视频播放方式 代码冗杂,加载失败无法播放,一片空白..需要flash支持 --> <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="500" height
用户7718188
2021/11/01
3K0
【HTML5】HTML5 多媒体标签 ① ( audio 音频标签 | 音频标签常见属性值设置 | 音频标签默认代码设置 | 音频标签设置多种类型音频文件 )
传统 HTML 开发中 , 如果想要向网页中嵌入音频和视频 , 需要 使用 Flash 浏览器插件才能实现 ;
韩曙亮
2023/04/24
6.2K0
【HTML5】HTML5 多媒体标签 ① ( audio 音频标签 | 音频标签常见属性值设置 | 音频标签默认代码设置 | 音频标签设置多种类型音频文件 )
[前端]利用WebAudioAPI获取音频频谱(html5音频可视化)
项目希望可以把音频可视化,有条随声音波动的曲线或者是像唱吧那种。开始是搜到了腾讯大腿(TGideas)写的audio可视化组件,想着直接用,后来各种原因还是打算自己重新写一个……虽然明显写得low了很多。 腾讯大腿的audio组件地址 http://www.3fwork.com/b403/001620MYM013253/ GitHub https://github.com/tgideas/motion/blob/master/component/src/main/audio/audio.js
Tuzei
2020/03/16
3.8K0
React中的-- 数据流
简介 React的组件简单理解起来其实就是一个函数,这个函数会接收props和state作为参数,然后进行相应的逻辑处理,最终返回该组件的虚拟DOM展现。在React中数据流向是单向的,由父节点流向子节点,如果父节点的props发生了改变,那么React会递归遍历整个组件树,重新渲染所有使用该属性的子组件。那么props和state究竟是什么?它们在组件中起到了什么作用?它们之间又有什么区别和联系呢?接下来我们详细看一下。 Props props其实就是properties的缩写,可以理解为组件的属性,你可
前朝楚水
2018/04/03
1.4K0
[剑指offer] 数据流中的中位数
如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值。如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中间两个数的平均值。我们使用Insert()方法读取数据流,使用GetMedian()方法获取当前读取数据的中位数。
尾尾部落
2018/09/04
8310
数据流中的中位数
如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值。如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中间两个数的平均值。
MickyInvQ
2021/12/07
4020
数据流中的中位数
如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值。如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中间两个数的平均值。我们使用Insert()方法读取数据流,使用GetMedian()方法获取当前读取数据的中位数。
名字是乱打的
2022/05/13
4760
API场景中的数据流
原文地址:https://dzone.com/articles/data-streaming-in-the-api-landscape
大数据弄潮儿
2018/05/30
1.6K0
HTML5视音频-解决全屏下出现的控制栏
HTML5学堂:HTML5视音频-解决全屏下的控制栏。HTML5可以简简单单的实现视频、音频的播放功能,功能虽好用,但是它的默认样式有点淡淡的忧伤,问题虽存在,解决的办法总是有的,今天我就给大家来分享一下解决视频全屏下出现的控制栏。 发现问题 video标签去除controls属性全屏下仍然出现控制栏 <video class="video-wrap" preload="auto" poster="../images/html5.png"> <source type="video/webm" src="
HTML5学堂
2018/03/12
3K0
HTML5视音频-解决全屏下出现的控制栏
HTML5音频audio和视频video用法解析
    html5新增加了2个媒体标签音频(audio)和视频(video),这样就更便于我们进行媒体化元素的内容开发网页!!!
十月梦想
2018/08/29
4.5K0
数据流中的中位数_63
如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值。如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中间两个数的平均值。我们使用Insert()方法读取数据流,使用GetMedian()方法获取当前读取数据的中位数。
名字是乱打的
2021/12/23
4280
【音频处理】Melodyne 导入音频 ( 使用 Adobe Audition 录制音频 | 在 Melodyne 中打开录制的音频 | Melodyne 对音频素材的操作 | 音频分析算法 )
参考 【音频处理】使用 Adobe Audition 录制电脑内部声音 ( 启用电脑立体声混音 | Adobe Audition 中设置音频设备 | Adobe Audition 内录 ) 博客进行内录 ;
韩曙亮
2023/03/29
8.5K0
【音频处理】Melodyne 导入音频 ( 使用 Adobe Audition 录制音频 | 在 Melodyne 中打开录制的音频 | Melodyne 对音频素材的操作 | 音频分析算法 )
python提取视频中的音频
一.安装模块 pip3 install moviepy 二.代码 from moviepy.editor import * video = VideoFileClip('1.mp4') #视频所在路径 audio = video.audio audio.write_audiofile('1.mp3') #音频所在路径
小小咸鱼YwY
2020/09/28
2K0
Pr消除音频中的杂音
按照知识共享署名-非商业性使用 4.0 国际协议进行许可,转载引用文章应遵循相同协议。
逍遥子大表哥
2021/12/19
1.4K0
Pr消除音频中的杂音
HTML5中的WebSocket
在传统方式下,很多网站为了实现即时通讯,所用的技术都是轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对伺服器发出HTTP request,然后由伺服器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向伺服器发出请求,然而HTTP request 的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽和服务器资源。
用户7353950
2022/05/10
1.2K0
HTML5中的WebSocket
TensorFlow和Pytorch中的音频增强
来源:Deephub Imba本文约2100字,建议阅读9分钟本文将介绍如何将增强应用到 TensorFlow 中的数据集的两种方法。 对于图像相关的任务,对图像进行旋转、模糊或调整大小是常见的数据增强的方法。因为图像的自身属性与其他数据类型数据增强相比,图像的数据增强是非常直观的,我们只需要查看图像就可以看到特定图像是如何转换的,并且使用肉眼就能对效果有一个初步的评判结果。尽管增强在图像域中很常见,但在其他的领域中也是可以进行数据增强的操作的,本篇文章将介绍音频方向的数据增强方法。 在这篇文章中,将介绍
数据派THU
2022/04/11
1.2K0
TensorFlow和Pytorch中的音频增强

相似问题

原始音频数据流中的网络音频回放裂纹

20

JAVA音频数据流

13

保护HTML5音频标签中的音频文件

11

带有JQuery音频的HTML5音频标签

13

如何快速播放http数据流中的音频

22
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档