标签: html5-audio

我有一段时间有这个问题,所以我想我会请求你的帮助.

对于概念验证项目,我使用jPlayer创建了一个仅限HTML 5的last.fm播放器.它适用于Firefox,但在使用Chrome(Chromium)时无法使用html解决方案.

首先,Chrome尝试通过流网址获取mp3文件.在预先缓冲了一点之后,它总是尝试通过发出另一个HTTP请求来读取最后128个字节.现在的问题是last.fm流服务器似乎一次只允许每个文件一个连接,这导致两个http连接都失败.似乎Chrome/Chromium忽略了音频标签的preload ="none"属性.据我所知,标签只是对浏览器的推荐.

普通的mp3文件就像魅力一样.此外,当在浏览器中输入重定向的流式URL时,它开始播放.似乎last.fm使用原始URL作为一次性访问令牌/访问控制过滤器,而解析后的流URL有效一段时间.

有关完整的HTTP标头(已删除cookie),请参阅http://pastebin.com/rBAd​​L4X8.(由Chromium元素检查员复制).

有没有办法在浏览器中规避这个问题？

我在HTML5页面中有一个音频元素.我开始播放音频然后暂停.之后我按回家按钮返回主屏幕并拨打电话.当呼叫结束时,音频元素自动恢复.这发生在Android 4.0.3上

问题是,这不是预期和期望的行为.不幸的是,当浏览器在后台运行时,不会抛出javascript事件,我无法使用Javascript捕获并阻止此行为.

任何帮助表示赞赏.提前致谢.

我想从ArrayBuffer播放音频数据...所以我生成我的数组并用微缩输入填充它.如果我在画布上绘制这些数据,它看起来像 - >

这样可行!

但是,如果我想听这个数据

context.decodeAudioData(tmp, function(bufferN) { //tmp is a arrayBuffer
    var out = context.createBufferSource();
    out.buffer = bufferN;
    out.connect(context.destination);
    out.noteOn(0);
}, errorFunction);

我听不到任何声音......因为调用了errorFunction.但错误是空的!

我也试着像这样得到缓冲区:

var soundBuffer = context.createBuffer(myArrayBuffer, true/*make mono*/);

但我得到错误:Uncaught SyntaxError:指定了无效或非法字符串.

谁能给我一个暗示？

编辑1(更多代码以及我如何获得麦克风输入):

 navigator.webkitGetUserMedia({audio: true}, function(stream) {

                liveSource = context.createMediaStreamSource(stream);

                // create a ScriptProcessorNode
                if(!context.createScriptProcessor){
                   node = context.createJavaScriptNode(2048, 1, 1);
                } else {
                   node = context.createScriptProcessor(2048, 1, 1);
                }


                node.onaudioprocess = function(e){

               var tmp = new Uint8Array(e.inputBuffer.byteLength);
               tmp.set(new      Uint8Array(e.inputBuffer.byteLength), 0);

   //Here comes the code from above.

谢谢你的帮助!

我正在构建一个实现HTML5音频标签的音乐播放器Web应用程序,但是希望它在浏览器中看起来一致 - 是否可以定义我自己的自定义CSS？如何？

干杯

费拉

我正在使用带有网络音频api的麦克风输入,需要获得音量值.

现在我已经让麦克风工作了:http: //updates.html5rocks.com/2012/09/Live-Web-Audio-Input-Enabled

另外,我知道有一种操纵音频文件的方法:http: //www.html5rocks.com/en/tutorials/webaudio/intro/

    // Create a gain node.
    var gainNode = context.createGain();
    // Connect the source to the gain node.
    source.connect(gainNode);
    // Connect the gain node to the destination.
    gainNode.connect(context.destination);
   // Reduce the volume.
   gainNode.gain.value = 0.5;

但是如何将这两者结合起来并获得输入音量值？我只需要价值,不需要操纵它.

有人知道吗？

我们正在浏览器中开发一种类似数字音频工作站的东西。我们需要在一个选项卡中处理多个音频文件。我们new Audio(audioUrl)过去可以在我们自己的混音器中播放音频。到目前为止，它一直在为我们工作。

使用最新版本的 Chrome (92)，我们遇到了上面的代码片段导致以下错误的问题：

[Intervention] Blocked attempt to create a WebMediaPlayer as there are too many WebMediaPlayers already in existence. See crbug.com/1144736#c27

我无法访问提供的错误链接，它说权限被拒绝。是否有建议的解决方法来处理这个问题？

更新： 我不再使用HTMLAudioElementto AudioBufferSourceNode。似乎是唯一直接的解决方案，因为 Chrome 团队正在讨论无论如何都要限制它们。注意：我们可能需要播放 1000 多个音频剪辑。这是参考铬讨论线程，他们将在webmediaplayers2021 年 8 月 5 日的下一个版本中将 的数量增加到 1000。

什么是静音HTML5音频元素的最佳方法？我不想要浏览器的自定义控件,所以我一直在寻找javascript.不幸的是,它似乎对我不起作用:(我无疑在做一些非常错误的事情.

    <audio id="background_audio" autoplay="autoplay">
      <source src="static/audio/clip.ogg" type="audio/ogg" />
      <source src="static/audio/clip.mp3" type="audio/mpeg" />
    </audio> 

<a href="#" onclick="document._video.muted=true; return false">mute sound</a>

还是要理解这个问题.谢谢!

我目前正在开发一个HTML5项目.

在Android本机浏览器中,在同一页面中多次播放相同的音频文件存在问题.Android ICS 4.0.4版本特别注意到该问题.在此版本中,音频将播放一次,但再次启动时,将不播放音频.同样的事情在Android ICS 4.0.3版本和更新的4.1.1版本中完美运行.

经测试的设备:
三星Galaxy Tab(Android 4.0.4):第一次播放时它不播放
HTC One(Android 4.0.4):第一次播放只播放它不播放
Sony Tab(Android 4.0.3):非常精细,多次播放音频
HTC Sensation(Android 4.0.3):非常精细,多次播放音频
三星Nexus手机(Android 4.1.1):非常精细,多次播放音频

根据对互联网的一些研究,这似乎是Android 4.0.4版的一个问题

请帮助我找到一些解决方案,使其适用于所有设备.

请使用此W3 Schools HTML5音频链接进行试用

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

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

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

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

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

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

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

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

我收到警告,在Chrome未来版本中将弃用某个功能.

这是这个脚本:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
    navigator.getUserMedia({
        video: true
    }, (stream) => {
        this.src = window.URL.createObjectURL(stream);
        this.stream = stream;
    }, (error) => {
        console.log(error);
    });
}

这记录了网络摄像头,所以我可以保存它,但控制台中显示以下警告:

[弃用]不推荐使用带有媒体流的URL.createObjectURL,并且将在2018年7月左右在M68中删除.请改用HTMLMediaElement.srcObject.

但是当我改变时:

this.src = window.URL.createObjectURL(stream);

至

this.src = window.HTMLMediaElement.srcObject(stream);

它不再像之前那样工作了..