我尝试使用 <audio>
中加载的声音文件中的网络音频 api 制作一种音量计(作为脉动效果)标签,我的指示器效果与此代码配合得很好,我可以从播放的音频中检索音量变化,并使用该值将不透明度效果应用于 <div>
使用jquery。
但是当我加载脚本时我听不到声音,音频正在播放,音量正在变化,但没有声音。也许我在某个地方错过了连接器?
有什么想法吗?
var audio = document.getElementById('sound');
var context = new AudioContext();
var analyser = context.createScriptProcessor(1024, 1, 1);
var source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
opacify();
function opacify(){
analyser.onaudioprocess = function(e){
var out = e.outputBuffer.getChannelData(0);
var int = e.inputBuffer.getChannelData(0);
var max = 0;
for(var i = 0; i < int.length; i++){
out[i] = 0;
max = int[i] > max ? int[i] : max;
}
$('#artist').css({'opacity': max}); // updates opacity from value
}
}
任何帮助表示赞赏。 谢谢...
最佳答案
如果你想从中得到一些输出,你需要将 scriptNode 的输出缓冲区设置为某个值。默认情况下,输出为空。
(如果您想要相同的输出,可以将其设置为 out[i] = int[i]
)。
var audio = new Audio();
audio.crossOrigin = 'anonymous';
audio.src = 'https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3';
audio.play();
var context = new AudioContext();
var analyser = context.createScriptProcessor(1024, 1, 1);
var source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
opacify();
function opacify() {
analyser.onaudioprocess = function(e) {
var out = e.outputBuffer.getChannelData(0);
var int = e.inputBuffer.getChannelData(0);
var max = 0;
for (var i = 0; i < int.length; i++) {
out[i] = int[i]; // set the output as the input
max = int[i] > max ? int[i] : max;
}
artist.style.opacity = max;
}
}
#artist {
height: 50px;
width: 50px;
background-color: red;
}
<div id="artist"></div>
但这会进行不必要的处理,消耗无用的内存,因此如果您想从源中听到未处理的声音,您甚至可以直接将源节点连接到目标节点。
var audio = new Audio();
audio.crossOrigin = 'anonymous';
audio.src = 'https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3';
audio.play();
var context = new AudioContext();
var analyser = context.createScriptProcessor(1024, 1, 1);
var source = context.createMediaElementSource(audio);
source.connect(analyser);
source.connect(context.destination); // connect the source to the destination
analyser.connect(context.destination); // chrome needs the analyser to be connected too...
opacify();
function opacify() {
analyser.onaudioprocess = function(e) {
// no need to get the output buffer anymore
var int = e.inputBuffer.getChannelData(0);
var max = 0;
for (var i = 0; i < int.length; i++) {
max = int[i] > max ? int[i] : max;
}
artist.style.opacity = max;
}
}
#artist {
height: 50px;
width: 50px;
background-color: red;
}
<div id="artist"></div>
无论如何,out[i] = 0
不会有任何好处。
关于javascript - 网络音频 api 音量指示器 - 不再有声音,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41642743/