标签: html5-audio

我正在构建一个跨平台的Web应用程序,其中音频在服务器上即时生成,并且可能通过HTML5音频元素直播到浏览器客户端.在浏览器上,我将使用Javascript驱动的动画,这些动画必须与播放的音频精确同步."精确"意味着音频和动画必须在彼此之间,并且希望在250ms内(想想唇形同步).由于各种原因,我无法在服务器上进行音频和动画,并对生成的视频进行实时流式传输.

理想情况下,服务器上的音频生成和浏览器上的音频播放之间几乎没有或没有延迟,但我的理解是延迟将难以控制,并且可能在3-7秒范围内(浏览器,环境 - ,网络和月相依赖).但是,我可以处理这个问题,如果我可以在运行中精确测量实际延迟,以便我的浏览器Javascript知道何时呈现正确的动画帧.

那么,我需要精确测量我将音频传输到流媒体服务器(Icecast？)和来自扬声器主机上扬声器的音频之间的延迟.一些蓝天的可能性:

• 将元数据添加到音频流,并从播放音频中解析它(我知道使用标准音频元素是不可能的)

• 为音频添加短暂的纯静音时段,然后在浏览器上检测它们(音频元素可以产生实际的音频样本吗？)

• 查询服务器和浏览器的各种缓冲区深度

• 在Javascript中解码流式音频,然后获取元数据

有关如何做到这一点的任何想法？

我想知道如何在所有页面上"连续"播放音频文件.因此,如果音频文件播放了20秒,那么当在另一个页面上导航时,它将从它停止的位置继续播放.我也试图在离开我的主页后减少音量.任何提示或建议我都会感激!谢谢= D

<audio src="songforsite.mp3" loop="true" autoplay="true" controls>
Unsupported in Firefox
</audio>

一行版本:

什么开源软件(WAMI-Recorder)/网络浏览器(通过getUserMedia)会给我最优质的录音？

高质量定义为(44.1或48个采样率)和16位样本大小.

更多信息:

所以目前我的解决方案是WAMI-Recorder,但我想知道HTML5规范是否已经成熟到浏览器中的某个点,这样我就可以在没有Flash的情况下进行录制并获得相同或更高质量的录音.目前,看起来WAMI最高可达22050.

我不需要跨浏览器支持,因为这是供内部业务使用.

非Flash解决方案也是首选.

我正在创建一个chrome扩展程序,它使用chrome tabCapture API从选项卡中捕获音频.我想在另一个html页面中播放这个音频流,希望最终为它创建一个可视化器.

我在后台脚本中捕获音频

chrome.browserAction.onClicked.addListener(function(activeTab) {
  var constraints = {
    audio: true,
    video: false,
  };

  var visualizerPage = chrome.extension.getURL("/views/visualizer.html");

  chrome.tabCapture.capture(constraints, function(stream) {
    console.log("\ngot stream");
    console.log(stream);

    chrome.tabs.create({
      url: visualizerPage
    }, function(tab) {

      chrome.tabs.sendMessage(tabID, {
        "message": "stream",
        "stream": stream
      });
    });
  });

从单击扩展名的任何页面捕获音频流.打开另一个选项卡,音频流将作为消息发送给它.

visualizer.html页面的javascript是

function loadStream(stream) {
  // what do I have to put here to play the stream?
}

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.message === "stream") {
    var stream = request.stream;

    if (!stream) {
      console.log("stream is null");
      return;
    } …

我目前正在使用HTML5音频播放器通过(移动)浏览器提供音频流(24/7无线电流).在流中加载并播放它工作正常.

主要问题是HTML5 <audio>标签将继续下载(缓冲)内容,即使它不活跃.对于移动用户来说,这可能是一个主要问题,因为他们中的大多数都支付数据使 到目前为止,我还没有找到一个适合跨浏览器的解决方案,以防止这种情况发生.

我到目前为止尝试过:

1. 按下暂停时卸载源.<这不适用于跨浏览器
   
2. 删除音频播放器元素并加载新元素.这是有效的,但说实话,这是一种非常简单的执行极其简单的任务的方式.

我只是想知道在整个问题上是否有一些我忽略的东西,因为我确信我不是唯一有这个问题的人.

我似乎只能使用Flash或Java在网络应用上录制语音.有没有办法通过JavaScript实现？

如何隐藏HTML5音频的浏览器特定控件？我正在制作缩略图来代表每个曲目和JavaScript来播放/暂停.

谢谢!

HTML:

<audio class="thumbnail" id="paparazzi" controls="none">
    <source src="song.ogg" type="audio/ogg" />
    <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
    Your browser does not support HTML5 audio.
</audio>

我正在以小块的形式从服务器接收PCM音频数据,并将它们存储在一个数组中.现在我想使用一些HTML5功能顺序播放这些音频块.我将其视为"可能"解决方案的两个选项是:

1. 带有数据URI的 HTML5音频标记
2. Web音频API

在我调查这些选项时,请向我建议我正在考虑的两个选项的任何其他选项或观点.虽然跨平台解决方案将是最好的,但我可以满足Chrome专用解决方案

我正在构建一个游戏,其中一个wav文件在点击播放 - 在这种情况下,它是一个枪声"爆炸".

问题是如果我快速点击,每次点击都不会播放一次声音 - 就像在播放声音时忽略点击一样,一旦声音结束,它就会再次开始听取咔嗒声.延迟似乎是大约一秒钟,所以你想,如果有人每秒点击4或5次,我想要5个刘海,而不是1个.

这是我的HTML:

<audio id="gun_sound" preload>
    <source src="http://www.seancannon.com/_test/audio/gun_bang.wav" />
</audio>

这是我的JS:

$('#' + CANVAS_ID).bind(_click, function() {
    document.getElementById('gun_sound').play();
    adj_game_data(GAME_DATA_AMMO_ID, -1);
    check_ammo();
}); 

想法？

我想知道用户的设备是否有连接的摄像头和麦克风,如果是,则授予权限以使用Javascript获取音频和视频流.我想至少在Chrome和Firefox上进行此项检查.什么是一致的API？