HTML5音频API-“;音频资源不可用于AudioContext构建”;
HTML5 Audio API - "audio resources unavailable for AudioContext construction"
我正在尝试使用webkitAudioContext为HTML5音频创建一个图形均衡器类型的可视化-目前仅限于Chrome。
当我试图改变音频来源,即播放不同的歌曲时,我发现了不寻常和不可预测的行为。我在某个地方读到了应该等到音频上的"canplay"事件被触发后再将其连接到上下文/分析器:
var context, sourceNode, analyser, javascriptNode, audio;
var ctx = $("#songcanvas").get()[0].getContext("2d");
function loadSong(url) {
if (audio!=undefined) { audio.pause(); }
audio = new Audio();
audio.src = url;
audio.addEventListener("canplay", function(e) {
setupAudioNodes();
}, false);
}
function setupAudioNodes() {
context = new webkitAudioContext();
javascriptNode = context.createJavaScriptNode(2048, 1, 1);
javascriptNode.connect(context.destination);
analyser = context.createAnalyser();
analyser.smoothingTimeConstant = 0.3;
analyser.fftSize = 512;
sourceNode = context.createMediaElementSource(audio);
sourceNode.connect(analyser);
analyser.connect(javascriptNode);
sourceNode.connect(context.destination);
javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
ctx.clearRect(0, 0, 1000, 325);
ctx.fillStyle="rgba(32, 45, 21,1)";
drawSpectrum(array);
}
audio.play();
}
function drawSpectrum(array) {
for ( var i = 0; i < (array.length); i++ ){
var value = array[i];
ctx.fillRect(i*5,325-value,3,325);
}
};
前三四次我更改源时,它是有效的,然后最终失败,出现"Uncaught SyntaxError:音频资源不可用于AudioContext构建"
此处为完整演示http://jsfiddle.net/eAgQN/
如果您只是想绘制光谱,我建议您不要创建JavaScriptNode
。相反,请尝试使用requestAnimationFrame
方法,因为它可以节省CPU周期,并使您更接近恒定的60fps(如果您的窗口/选项卡位于后台,则特别有用,因为requestAnimationFrame
中的任何函数都将等待窗口再次对焦后再启动)。
出现该错误的原因可能是:A)每个窗口只能创建一个AudioContext
,B)用完MediaElementSource
后应该断开连接,C)还应该删除实际的Audio
元素。
以下是您的演示,其中包含我上面概述的更改:http://jsbin.com/acolet/1/
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext(),
audioAnimation, sourceNode, analyser, audio,
songs = document.getElementById('songs'),
canvas = document.getElementById('songcanvas'),
WIDTH = canvas.width,
HEIGHT = canvas.height,
// get the context from the canvas to draw on
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(0, 0, 0, HEIGHT),
bar = { width: 2, gap: 2, ratio: HEIGHT / 256 };
gradient.addColorStop(1.00,'#000000');
gradient.addColorStop(0.75,'#ff0000');
gradient.addColorStop(0.25,'#ffff00');
gradient.addColorStop(0.00,'#ffff00');
ctx.fillStyle = gradient;
songs.addEventListener('click', loadSong, false);
function loadSong(e) {
e.preventDefault();
var url = e.target.href;
if (!url) return false;
if (audio) audio.remove();
if (sourceNode) sourceNode.disconnect();
cancelAnimationFrame(audioAnimation);
audio = new Audio();
audio.src = url;
audio.addEventListener('canplay', setupAudioNodes, false);
}
function setupAudioNodes() {
analyser = (analyser || context.createAnalyser());
analyser.smoothingTimeConstant = 0.8;
analyser.fftSize = 512;
sourceNode = context.createMediaElementSource(audio);
sourceNode.connect(analyser);
sourceNode.connect(context.destination);
audio.play();
drawSpectrum();
}
function drawSpectrum() {
var freq = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freq);
ctx.clearRect(0, 0, WIDTH, HEIGHT);
audioAnimation = requestAnimationFrame(drawSpectrum);
for ( var i = freq.length - 1; i >= 0 ; i-- ){
var x = i * (bar.width + bar.gap);
var y = HEIGHT - (freq[i] * bar.ratio);
ctx.fillRect(x, y, bar.width, HEIGHT);
}
}
body { font-family: sans-serif; background-color: #000; }
a { color: #fff; text-decoration: none; }
ul { padding: 20px 0; width: 100px; }
ul, canvas { float: left; }
<ul id="songs">
<li><a class="song" href="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg">ACDC</a></li>
<li><a class="song" href="http://upload.wikimedia.org/wikipedia/en/9/9f/Sample_of_%22Another_Day_in_Paradise%22.ogg">Phil Collins</a></li>
<li><a class="song" href="http://upload.wikimedia.org/wikipedia/en/1/1f/%22Layla%22%2C_Derek_and_the_Dominos_song_%28sample%29.ogg">Clapton</a></li>
</ul>
<canvas id="songcanvas" width="400" height="128"></canvas>
相关文章:
- 如何播放部分音频文件
- 音频控件在mouseover上显示,在mouseout上淡出
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 是否可以在浏览器中使用纯JavaScript保存音频流
- angular不会更改json的音频源
- 通过幻灯片更改事件停止使用jquery的音频
- 音频和动画在javasctipt循环中同步
- 使用jQuery控制来自图像的音频
- 调整<音频>元素
- javascript:发送带有音频文件的POST,然后重定向到新页面
- 使用带有CefSharp或CefGlue的JavaScript的本地或流式音频
- 未能加载,因为找不到支持的源.当播放HTML5音频元素时
- 动态加载的自定义javascript/jQuery/HTML5音频播放器的问题
- <的自定义进度条;音频>并且<进度>HTML5元素
- 当用户点击音频控件时,无法接收点击事件
- Html5音频时间更新精度
- HTML5音频如何防止浏览器麦克风拾取所有声音
- 如何通过给定的url获取youtube音频数据
- 如何使用AudioContext HTML5从麦克风获取音频数据
- HTML5音频API-“;音频资源不可用于AudioContext构建”;