- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试使用 HTML5 音频和基于 Canvas 的频率创建可视化工具。它在 chrome 和 safari 上运行良好。但我想让它也能在 IE 和 Firefox 上运行。
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.crossOrigin = "anonymous";
audio.src = 'http://www.streaming507.com:8072/stream';
audio.controls = true;
audio.loop = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player() {
document.getElementById('audio_box').appendChild(audio);
context = new webkitAudioContext(); // AudioContext object instance
analyser = context.createAnalyser(); // AnalyserNode method
canvas = document.getElementById('analyser_render');
ctx = canvas.getContext('2d');
// Re-route audio playback into the processing graph of the AudioContext
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
//frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper() {
window.webkitRequestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
var my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient; // Color of the bars
bars = 100;
for (var i = 0; i < bars; i++) {
bar_x = i * 3;
bar_width = 2;
bar_height = -(fbc_array[i] / 2);
// fillRect( x, y, width, height ) // Explanation of the parameters below
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
}
div#mp3_player {
width: 500px;
height: 60px;
background: #000;
padding: 5px;
margin: 50px auto;
}
div#mp3_player > div > audio {
width: 500px;
background: #000;
float: left;
}
div#mp3_player > canvas {
width: 500px;
height: 30px;
background: #002D3C;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mp3_player">
<div id="audio_box"></div>
<canvas id="analyser_render"></canvas>
</div>
请注意,它不显示堆栈溢出的可视化,但它可以在本地主机上运行。基本上,它在 IE 和 Moz 上不显示的问题是 webkitAudioContext()
和 webkitRequestAnimationFrame()
。从第一个中删除 webkit 使其可以在 chrome 和 IE 上工作,但在 Safari 上停止工作。
有什么办法让它在当前的浏览器(如 Chrome、Safari、Firefox 和 IE)中工作吗?
最佳答案
尝试以这种方式分配AudioContext
:
var Actx;
try {
Actx = (AudioContext || webkitAudioContext);
}
catch(err) {
// sorry, no visualizer for you...
}
if (Actx) {
context = new Actx();
// ... continue here
}
else {
// optionally rub it in here instead of in catch...
}
对于requestAnimationFrame
,您可以使用this polyfill ,然后使用不带前缀的:
function frameLooper() {
window.requestAnimationFrame(frameLooper);
...
您可能还想等待音频元素的“canplay
”事件。
关于javascript - 如何使AudioContext()和RequestAnimationFrame()在当前浏览器中运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41372553/
假设我们有一个功能/模块,可以增强网站。所以这并不是真正必要的,它使用 requestAnimationFrame,即 not supported in older browsers比如IE8/9。我
“requestAnimationFrame”方法在以下示例中不起作用。控制台不显示任何错误消息。那么这段代码的错误是什么?HTML:
我有以下 JavaScript: function animate() { // call other function offset += 3; if (offset > 15) offset =
我有一些基本脚本可以将文本左右滚动,我尝试将其从 timeout 转换为 requestAnimationFrame,但是,我无法制作它有效。 function slideHorizontal(e,
我遇到了这个奇怪的问题,我递增了 1,但是,弹出 javascript 窗口时出现的增量显示我已递增了 9 或 13,这两者都来自于我是否分别增加 1 或 -1。这是怎么回事? 这是 requestA
我试图了解有关 requestAnimationFrame 的一件事。 在下面的示例代码中,我运行了 60 次,这应该与您通常获得的典型每秒 60 帧相匹配,因此它应该持续 1 秒。然而我故意通过调用
有人可以分享一下在动画循环中应该在哪里进行 RequestAnimationFrame 调用吗?它应该在循环的开头还是循环的结尾?我已经多次看到它在循环开始时使用它,但是位于循环底部不是更好吗?这样在
我尝试为很多 svg 路径设置动画,但功能不起作用 错误: Uncaught RangeError: Maximum call stack size exceeded function dashOf
我有一张滑动图片沿着屏幕缓慢移动。一旦它们离开屏幕,它们就会背靠背靠在丝带上。因此,当您在网页上时一切正常,但当您离开并且其中一张图像超出范围时。它会被放回错误的地方。我认为这可能与 requestA
我在使用 requestAnimationFrame() 时遇到了性能问题。 考虑以下代码。这是一个简单的循环,每次时间增量大于 20 毫秒时,都会打印自上一帧以来的时间。 const glob_ti
根据我的阅读,requestAnimationFrame 可以判断浏览器何时失去焦点。发生这种情况时是否会触发某种事件?我正在寻找暂停和恢复与 requestAnimationFrame 相关的代码。
let pf = document.querySelectorAll('.pf'); for (let i of pf) { Object.assign(i.style, { left:
我最近看了 Jake Archibald 的演讲。他在演讲中举了一个例子,他说使用 requestAnimationFrame 两次来延迟应用 CSS 样式来执行 CSS 动画。 参见https://
我正在使用 requestAnimationFrame 为视频流设置动画,我知道请求动画在后台不起作用,所以有什么方法可以让它在后台运行。 我知道我们也可以使用 setInterval 或 setTi
我是编程新手,面对这个功能: function update(time = 0) { console.log(time); requestAnimationFrame(update);
我正在尝试使用 JavaScript 和 requestAnimationFrame 制作一个简单的计时器(从 0 开始计数)。单击某些内容时,我想从 0 开始计时。目前我的代码在单击按钮时显示计时器
如果我有以下代码: window.requestAnimationFrame(animation1); //animation1 takes more than 16.67ms, misses the
我有一个带有 requesetAnimationFrame 的动画,当我重播它时,它变得越来越快,直到它变得不可见。 function tirer(){ var missile=documen
我有一个问题: document.querySelector('div').addEventListener('mousedown', function(){ hello = true
我有一种情况,我想在 1 秒内将 600px 宽的 div 的宽度设置为 0px。为此,我可以使用 requestAnimationFrame()。但我真的不能 100% 确定动画是否需要 1 秒。
我是一名优秀的程序员,十分优秀!