标签: html5-audio

HTML5视频的多个音轨

我正在使用HTML5为我的网站制作视频.理想情况下,我只有一个静音视频文件,以及五种与视频同步的不同语言的不同音轨.

然后,我有一个按钮,允许用户在音频轨道之间切换,即使视频正在播放; 并且正确的音轨将变为现实(没有视频暂停或重新开始或任何东西;很像DVD音轨选择).

我可以在Flash中完成这个,但我不想这样做.必须有一种方法可以在纯HTML5或HTML5 + jQuery中执行此操作.我想你要播放0音量的所有音频文件,只增加活动音轨的音量...但我不知道怎么做,更不用说当用户暂停或倒带时处理它该视频...

提前致谢!

javascript jquery html5 html5-video html5-audio

16
推荐指数
3
解决办法
1万
查看次数

HTML5音频播放器持续时间显示南

我刚刚开始学习HTML5,并使用JQuery浏览HTML5音频播放器.我用播放列表编写了一个播放器,一切正常,除了持续时间,我的输入范围滑块不起作用.当我调试时,我发现我的持续时间显示为NAN.我正在设置歌曲初始化后的持续时间.

这是我的JS代码

jQuery(document).ready(function() {

    container = $('.container');
    playList =  $('#playlist');
    playListSong =  $('#playlist li');
    cover = $('.cover');
    play = $('#play');
    pause = $('#pause');
    mute = $('#mute');
    muted = $('#muted');
    close = $('#close');

    song = new Audio('music/Whistle-Flo-Rida-Mp3-Download.mp3','music/Whistle-Flo-Rida-Mp3-Download.mp3');

    var canPlay = song.canPlayType('audio/mpeg;');
    if (canPlay) {
        song.type= 'audio/mpeg';
        song.src= 'music/Whistle-Flo-Rida-Mp3-Download.mp3';
    }

    playListSong.click(function(){

        $('#close').trigger('click');
        window["song"] = new Audio('music/'+$(this).html()+'.mp3','music/'+$(this).html()+'.mp3');

        $('#play').trigger('click');

    });

    play.live('click', function(e) {

        e.preventDefault();
        song.play();
        //cover.attr("title", song.duration);
        $(this).replaceWith('<a class="button gradient" id="pause" href="" title=""><span>k</span></a>');

        $('#close').fadeIn(300);
        $('#seek').attr('max',song.duration);
    });

    pause.live('click', function(e) {
        e.preventDefault();
        song.pause();
        $(this).replaceWith('<a class="button gradient" …
Run Code Online (Sandbox Code Playgroud)

duration nan html5-audio

15
推荐指数
1
解决办法
2万
查看次数

HTML5音频显示仅播放暂停和静音按钮

我想知道是否有一种快速简单的方式来设置HTML5音频元素的样式以显示我想要的内容.我想知道你是否可以打开和关闭某些控件,但似乎并非如此.

我不想要进度/跟踪栏,或显示剩余时间.我只想要一个简单的播放/暂停切换按钮,以及一个静音/取消静音切换按钮.

就这样!有任何想法吗?

html5 html5-audio

15
推荐指数
2
解决办法
4万
查看次数

从html5视频中获取音频

是否可以从HTML5中的mp4或webm视频元素获取音频?

我正在尝试使用https://github.com/corbanbrook/dsp.js来计算音频的FFT,但是,我只有mp4和webm视频.

javascript html5 html5-video html5-audio

15
推荐指数
1
解决办法
9193
查看次数

如何强制HTML5音频元素缓冲整首歌曲?

我正在开发一个本地服务器,它将流式传输用户的音频文件,以便他们可以使用HTML5音频对象通过Web浏览器访问它们.由于这些文件位于用户的计算机上,我希望文件在加载时可以完全缓冲,但对于某些大文件,歌曲会缓慢部分缓存,然后停止,并在稍后恢复缓冲.

我的问题是:如何强制音频对象一次缓冲整首歌曲?我可以从javascript执行此操作,是否必须在音频对象上设置属性,或者我还能做什么?

javascript audio html5 html5-audio

14
推荐指数
2
解决办法
1万
查看次数

Safari上的HTML5音频标签有延迟

我正在尝试完成一个简单的类似涂鸦的行为,使用html标签点击mp3/ogg声音.它应该可以在Firefox,Safari和Safari iPad下工作.

我已经尝试了很多方法,并且已经归结为:

HTML

    <span id="play-blue-note" class="play blue" ></span>
    <span id="play-green-note" class="play green" ></span>


    <audio id="blue-note" style="display:none" controls preload="auto" autobuffer> 
        <source src="blue.mp3" />
        <source src="blue.ogg" />
        <!-- now include flash fall back -->
    </audio>

    <audio id="green-note" style="display:none" controls preload="auto" autobuffer> 
        <source src="green.mp3" />
        <source src="green.ogg" />
    </audio>
Run Code Online (Sandbox Code Playgroud)

JS

function addSource(elem, path) {
    $('<source>').attr('src', path).appendTo(elem);
}

$(document).ready(function() {


    $('body').delegate('.play', 'click touchstart', function() {
        var clicked = $(this).attr('id').split('-')[1];

        $('#' + clicked + '-note').get(0).play();



    });

});  
Run Code Online (Sandbox Code Playgroud)

你可以在ign.com.uy/loog/看到整个演示

这似乎在Firefox下运行得很好,但是每当你点击时Safari似乎都有延迟,即使你多次点击并且音频文件已加载.在iPad上的Safari上,它几乎无法预测.

此外,当我在本地测试时,Safari的性能似乎有所改善,我猜测Safari每次都在下载文件.这可能吗?我怎么能避免这个?谢谢!

javascript html5 html5-audio

14
推荐指数
3
解决办法
1万
查看次数

一个很好的文本到语音JavaScript库

我正在为我的应用程序寻找一个好的文本到语音javascript库.我环顾四周,看到了Jtalkspeak.js.但我不确定哪一个出去.我很想知道人们对它们的利弊,我很想知道你们是否还有其他任何Javascript插件.

我基本上可视化动画,我想为视障人士添加一些音频,告诉他们发生了什么.

javascript jquery text-to-speech jquery-plugins html5-audio

14
推荐指数
2
解决办法
3万
查看次数

无论如何,网络音频和html5音频有什么区别?

我刚问了一个关于音频的问题,人们认为这是一个关于html5-audio而不是网络音频的问题.

所以我想知道有什么区别?

html5-audio web-audio-api

14
推荐指数
1
解决办法
3622
查看次数

Web Audio API附加/连接不同的AudioBuffers并将它们作为一首歌播放

我一直在玩Web Audio API,我正在尝试加载一首歌的多个部分并将它们附加到一个新的ArrayBuffer,然后使用该ArrayBuffer将所有部分作为一首歌播放.在下面的例子中,我使用相同的歌曲数据(这是一个小循环)而不是歌曲的不同部分.

问题是它仍然只播放一次而不是两次,我不知道为什么.

下载歌曲

function init() {

  /**
   * Appends two ArrayBuffers into a new one.
   * 
   * @param {ArrayBuffer} buffer1 The first buffer.
   * @param {ArrayBuffer} buffer2 The second buffer.
   */
  function appendBuffer(buffer1, buffer2) {
    var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength);
    tmp.set( new Uint8Array(buffer1), 0);
    tmp.set( new Uint8Array(buffer2), buffer1.byteLength);
    return tmp;
  }

  /**
   * Loads a song
   * 
   * @param {String} url The url of the song.
   */
  function loadSongWebAudioAPI(url) {
    var request = new XMLHttpRequest();
    var …
Run Code Online (Sandbox Code Playgroud)

javascript concatenation html5-audio arraybuffer web-audio-api

14
推荐指数
2
解决办法
8111
查看次数

Firefox:navigator.getUserMedia不是一个函数

我正在玩浏览器和音频.

我这样做

        var session = {
          audio: true,
          video: false
        };
        var recordRTC = null;
        navigator.getUserMedia(session, initializeRecorder, onError);
Run Code Online (Sandbox Code Playgroud)

但是,使用最新的FF可用,我得到了一个javascript错误,说

navigator.getUserMedia不是一个函数

我在这篇博文中复制了这段代码:https://blog.groupbuddies.com/posts/39-tutorial-html-audio-capture-streaming-to-nodejs-no-browser-extensions

在最新的Chrome上类似:

未捕获的TypeError:undefined不是函数

但我知道这两个浏览器都支持这个api

我究竟做错了什么?

javascript firefox html5-audio

14
推荐指数
4
解决办法
2万
查看次数