我正在尝试制作一个具有音频可视化功能的音乐播放器。我希望它的功能,当我点击曲目的名称,然后该曲目应该开始播放
<script src="main.js"> </script>
<script src="/circular-audio-wave.min.js"></script>
<script>
var sel2= 'audio/audio3.mp3',
sel1 = '';
$( "li" ).click(function() {
sel1 = ($(this).data('val'));
sel2 = 'audio/' + sel1;
console.log(sel2);
});
let wave = new CircularAudioWave(document.getElementById('chart-container'));
wave.loadAudio(sel2);
</script>
我希望将sel2值发送到jQuery函数之外,以便'wave.loadAudio(sel2);‘可以使用它。在运行这个脚本时,我只得到了‘audio/audio o3.mp3’播放,因为我之前已经将这个值赋给了变量。我希望它设置sel2的新值(无论我单击哪个值,然后将其传递给wave.loadAudio(sel2)),以便每次单击新曲目时都能播放该曲目。
发布于 2019-07-17 16:54:49
您并不真正了解javascript中的回调函数是如何工作的,它是javascript的异步端。你的wave.loadAudio(sel2)
将总是得到audio/audio3.mp3
,因为它是在你的点击函数之前加载的。看看这个简单的例子:
console.log('First');
setTimeout(function(){
console.log('Second')
},0);
console.log('Third');
如果你运行这个脚本,你会看到:'First','Third','Second',因为回调函数被添加到Callback queue
中,当call stack
为空时,这个函数就实现了,这样回调函数就可以作为非阻塞函数使用。因此,在您的示例中,您应该将wave.loadAudio(sel2)
添加到主体单击函数中:
var sel2= 'audio/audio3.mp3';
let wave = new CircularAudioWave(document.getElementById('chart-container'));
sel1 = '';
$( "li" ).click(function() {
sel1 = ($(this).data('val'));
sel2 = 'audio/' + sel1;
wave.loadAudio(sel2);
});
顺便说一句,你的代码有更多的错误。尽量使用默认参数,箭头函数,不要声明全局变量( sel1 ),避免使用var
,sel1应该在单击函数内部而不是外部声明。
https://stackoverflow.com/questions/57071352
复制相似问题