我正在使用HTML5为我的网站制作视频.理想情况下,我只有一个静音视频文件,以及五种与视频同步的不同语言的不同音轨.
然后,我有一个按钮,允许用户在音频轨道之间切换,即使视频正在播放; 并且正确的音轨将变为现实(没有视频暂停或重新开始或任何东西;很像DVD音轨选择).
我可以在Flash中完成这个,但我不想这样做.必须有一种方法可以在纯HTML5或HTML5 + jQuery中执行此操作.我想你要播放0音量的所有音频文件,只增加活动音轨的音量...但我不知道怎么做,更不用说当用户暂停或倒带时处理它该视频...
提前致谢!
我刚刚开始学习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) 我想知道是否有一种快速简单的方式来设置HTML5音频元素的样式以显示我想要的内容.我想知道你是否可以打开和关闭某些控件,但似乎并非如此.
我不想要进度/跟踪栏,或显示剩余时间.我只想要一个简单的播放/暂停切换按钮,以及一个静音/取消静音切换按钮.
就这样!有任何想法吗?
是否可以从HTML5中的mp4或webm视频元素获取音频?
我正在尝试使用https://github.com/corbanbrook/dsp.js来计算音频的FFT,但是,我只有mp4和webm视频.
我正在开发一个本地服务器,它将流式传输用户的音频文件,以便他们可以使用HTML5音频对象通过Web浏览器访问它们.由于这些文件位于用户的计算机上,我希望文件在加载时可以完全缓冲,但对于某些大文件,歌曲会缓慢部分缓存,然后停止,并在稍后恢复缓冲.
我的问题是:如何强制音频对象一次缓冲整首歌曲?我可以从javascript执行此操作,是否必须在音频对象上设置属性,或者我还能做什么?
我正在尝试完成一个简单的类似涂鸦的行为,使用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每次都在下载文件.这可能吗?我怎么能避免这个?谢谢!
我刚问了一个关于音频的问题,人们认为这是一个关于html5-audio而不是网络音频的问题.
所以我想知道有什么区别?
我一直在玩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
我正在玩浏览器和音频.
我这样做
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
我究竟做错了什么?
html5-audio ×10
javascript ×7
html5 ×5
html5-video ×2
jquery ×2
arraybuffer ×1
audio ×1
duration ×1
firefox ×1
nan ×1