标签: html5-audio

我正在制作一个程序,将文本转换为莫尔斯电码音频.

说我输入sos.我的程序将把它变成数组[1, 1, 1, 0, 2, 2, 2, 0, 1, 1, 1].哪里s = dot dot dot(或1,1,1),和o = dash dash dash(或2,2,2).这部分很容易.

接下来,我有两个声音文件:

var dot = new Audio('dot.mp3');
var dash = new Audio('dash.mp3');

我的目标是有一个功能,dot.mp3当它看到a时1,dash.mp3当它看到a时会播放,并在看到a 2时暂停0.

以下类型/有时/有时可行,但我认为它存在根本缺陷,我不知道如何修复它.

function playMorseArr(morseArr) {
  for (let i = 0; i < morseArr.length; i++) {
    setTimeout(function() {
      if (morseArr[i] === 1) {
        dot.play();
      }
      if (morseArr[i] === …

我们需要将实时音频(从医疗设备)流式传输到网络浏览器,端到端延迟不超过3-5秒(假设网络延迟为200毫秒或更短).今天我们使用浏览器插件(NPAPI)来解码,过滤(高,低,带)和回放音频流(通过Web套接字传送).

我们想要替换插件.

我正在查看各种Web Audio API演示,我们所需的大部分功能(播放,增益控制,过滤)似乎都可以在Web Audio API中使用.但是,我不清楚Web Audio API是否可用于流式传输源,因为大多数Web Audio API都使用短音和/或音频剪辑.

可以使用Web Audio API播放实时流式音频吗？

更新(2015年2月11日):

经过一些研究和本地原型设计后,我不确定是否可以使用Web Audio API进行实时音频流传输.由于Web Audio API的decodeAudioData并非真正设计用于处理随机的音频数据块(在我们的例子中通过WebSockets提供).它似乎需要整个'文件'才能正确处理它.

请参阅stackoverflow:

• 如何使用node.js和socket.io通过WebSockets传输MP3数据？
• 为decodeAudioData定义'有效的mp3块'(WebAudio API)

现在可以使用createMediaElementSource将<audio>元素连接到Web Audio API,但是根据我的经验,该<audio>元素会导致大量的端到端延迟(15-30秒)并且似乎没有任何方法将延迟减少到3-5秒以下.

我认为唯一的解决方案是将WebRTC与Web Aduio API一起使用.我希望避免使用WebRTC,因为它需要对我们的服务器端实现进行重大更改.

更新(2015年2月12日)第一部分:

我还没有完全删除<audio>标签(需要完成我的原型).一旦我排除了它,我怀疑createScriptProcessor(已弃用但仍然支持)将是我们环境的一个不错的选择,因为我可以"流"(通过WebSockets)我们的ADPCM数据到浏览器,然后(在JavaScript中)将其转换为PCM.类似于Scott的库(见下文)使用createScriptProcessor.此方法不要求数据处于适当大小的"块"和关键时序,如decodeAudioData方法.

更新(2015年2月12日)第二部分:

经过更多测试后,我删除了<audio>Web Audio API接口,因为根据源类型,压缩和浏览器,端到端延迟可能是3-30秒.这留下了createScriptProcessor方法(参见下面的Scott的帖子)或WebRTC.在与我们的决策者讨论后,我们决定采用WebRTC方法.我认为它会起作用.但它需要更改我们的服务器端代码.

我要标记第一个答案,就这样'问题'就此结束了.

谢谢收听.随意添加评论.

我想知道如何检查是否加载了HTML5音频元素.

我知道如果HTML5音频播放可用,如何签入Javascript.但是我如何专门检查MP3音频播放是否可用,因为IE9和Chrome支持它,而Firefox和Opera则不支持.

我正在尝试使用标签和javascript自动播放一个小的声音文件来启动它.

<audio id="denied" preload="auto" controls="false">
    <source src="sound/denied.wav" />
 </audio>

然后通过javascript,在适当的时候:

$('#denied')[0].play()

适用于我桌面上的Chrome.在Android 4.1.1中,除非在javascript尝试播放之前在HTML5音频控件上点击"播放",否则声音将无法播放.

所以基本上Android浏览器(股票或Dolphin)不播放音频,除非用户在javascript之前的某个时刻启动它.这是有意的吗？有没有办法解决？

许多示例演示了嵌套在音频标记中的多个源标记,作为克服不同浏览器之间编解码器兼容性的方法.像这样的东西 -

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

使用JavaScript时,我也可以创建像这样的音频元素 -

var new_audio = document.createElement("audio");

我可以在哪里设置其来源.src-new_audio.src="....";

我没能找到如何通过JavaScript在音频元素中添加多个源,类似于HTML片段中显示的源标签.

我是否操纵new_audio并在其中添加<source...标签,就像操纵任何其他DOM元素一样？我现在正在这样做,它的工作原理是 -

new_audio.innerHTML = "<source src='audio/song.ogg' type='audio/ogg' />";
new_audio.play();

我想知道是否有更合适的方法呢？

我使用了来自Analyzer节点的FFT数据,使用getByteFrequencyDataWeb Audio API中的方法创建了一个频谱可视化工具,如下所示:

在这个例子中,我有256个数据库.这个数字到底对应的是什么？它是每个频率成分的分贝水平.如果是这样,我怎么知道每个bin的频率值对应于什么？

我想知道所以我可以尝试构建图形方程,因此想知道在哪些点指示滤波器带.理想情况下,我想表示20Hz到20kHz的频率,并相应地绘制它们之间的间隔.

谢谢你的帮助.

看看这个太空射击游戏演示.

HTML5的音频是完美的在Chrome 18和Firefox 10中有播放声音没有滞后和每个样品发挥完美.我最后一次尝试使用HTML5音频和JavaScript播放声音时,我无法播放多次声音.

Scirra做了什么巫术才能让它如此完美？

我已经花了几周的时间来摆弄HTML5视频/音频的地狱.通常是一段时间后出现失败的原因,但我一直都无法找到为什么我会在Chrome中转发和重新排列问题.

无论如何...

当请求视频或音频文件时,视频或音频标签正在加载到extjs面板中.这些文件作为流发送,它们在IE和Firefox中运行良好(在响应头添加持续时间之后)safari存在问题,但显然整个站点都在HTTPS中运行(现在正在进行).

在chrome(这是我的问题并且是最新版本)中,视频和音频加载得很好,但我无法倒带或前进.当试图寻找视频时,请继续几秒钟,直到它到达流的末尾.音频也播放得很好但是多次尝试倒带(或前进)只会打破进度条并停止播放音频.

我不完全确定从服务器发送了什么,但我想知道这是否可能是由于响应中缺少数据引起的.如果不是其他任何指向我修复的东西也同样受欢迎.我想我已经覆盖了整个设置,我确保每个浏览器都有一个源标签.

编辑:这是javascript为其中一个文件生成的代码:

<video width="1889" height="2" preload="auto" autoplay="1" controls="1" id="videoPlayer" style="width: 1889px; height: 233px; ">
<source src="http://localhost:8080/epaServer/epa/documents/496.ds_webm?sessionId=5616fde4-50af-43d6-a57c-f06540b64fcb" type="video/webm">
<source src="http://localhost:8080/epaServer/epa/documents/496.ds_mp4?sessionId=5616fde4-50af-43d6-a57c-f06540b64fcb" type="video/mp4">
<div>Your browser doesn't support html5 video. <a>Upgrade Chrome</a></div>
</video>

我还发现,即使我从应用程序中单独打开它,我也无法找到任何文件.

我试图在我自己找到更多信息,这些是网络标签中的标题铬显示:

请求URL:https:// localhost:8443/epaServer/epa/documents/496.ds_webm？sessionId = 5616fde4-50af-43d6-a57c-f06540​​b64fcb

请求方法:GET

状态代码:200 OK

请求标题

接受:/ Accept-Charset:ISO-8859-1,utf-8; q = 0.7,*; q = 0.3

Accept-Encoding:identity; q = 1,*; q = 0

接受语言:EN-US,EN; Q = 0.8

连接:保持活跃

饼干:的sessionId = 5616fde4-50af-43d6-a57c-f06540​​b64fcb

主持人:本地主机:8443

User-Agent:Mozilla/5.0(Windows NT 6.1; WOW64)AppleWebKit/535.19(KHTML,类似Gecko)Chrome/18.0.1025.168 Safari/535.19

查询字符串Parametersview URL编码

的sessionId:5616fde4-50af-43d6-a57c-f06540​​b64fcb

响应标题

缓存控制:私人

内容长度:1588816 …

我有一个音频文件列表,显示为链接和一个<audio>html5播放器.每个链接调用一个函数,该函数在以下内容中更改<source>标记的src <audio>:

<audio controls="controls" preload="none">
  <source type="audio/mpeg" src="{{selectedSongPath}}"/>
</audio>

...

<div class="songEntry" ng-repeat="song in songs">
  <a href="" ng-click="songSelect(song.path)">{{song.name}}</a>
</div>

...

$scope.songSelect = function(songPath) {
    $scope.selectedSongPath = songPath;
}

我可以看到src正在改变,但没有播放.路径还可以; 如果我用其中一条路径初始化src,则播放器可以工作.

我究竟做错了什么？