image
又是一期新的特效安利，咳咳贡必，準確說應該是第二期兔港。如上圖，這次介紹的就是上次說過的炫酷音樂播放器——Azusa!
Azusa
Three.js開發(fā)仔拟，媲美AE特效的網(wǎng)頁端音樂播放器衫樊！
作者大佬：EYHN
Azusa代碼倉庫：github.com/EYHN/Azusa
demo預覽：www.hojun.cn/azusa
gif圖預覽：
image
視頻預覽：
https://www.bilibili.com/video/av48789169
網(wǎng)頁使用教程
參考Azusa倉庫地址的教程的umd部分：
<div id="bg"></div>
<canvas id="app"></canvas>
<script src="https://cdn.jsdelivr.net/npm/three"></script>
<script src="./lib/azusa.min.js"></script>
<script>
const azusa = new Azusa({
view: document.getElementById('app'),
subdivisionSize: 1024,
cutEnd: 256
});
azusa.audio.load({
src: './example/media/cha.mp3',
onPrgress: (xhr) => {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}
});
azusa.audio.setVolume(0.5);
window.addEventListener('resize', () => {
azusa.resize(window.innerWidth, window.innerHeight);
})
const container = document.getElementById('bg')
container && (container.style.backgroundImage = "url(./example/media/9s.jpg)")
</script>
注意
- 上面份代碼跑不起來，原因是新版的three舍棄了一些方法利花。于是查看作者的commit信息科侈，發(fā)現(xiàn)作者開發(fā)的使用使用的是three.js的0.85.0版本。所以需要指明three版本炒事，博主試過0.102以下版本都行臀栈。
- 降低了thress.js版本后還需要在服務器環(huán)境下運行才能查看效果。
- 音樂在新版谷歌瀏覽器下不能制動播放羡洛，要加用戶交互才行
博主修改過程
第一步挂脑，使用git clone 命令 克隆Azusa github源碼。
git clone git@github.com:EYHN/Azusa.git
看源碼雖然吃力欲侮，但是了解這個項目最好的途徑崭闲。
第二步，修改example的代碼威蕉，解決之前發(fā)現(xiàn)的問題刁俭。
<link rel="stylesheet" ><style>
<script src="./js/three.js"></script>
<script src="./js/azusa.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
直接將three和需要的js下載到本地，防止資源丟失導致不可以韧涨。其中three.js是從npm下載的0.85版本牍戚。還引入了font-awesome圖標庫和jquery的依賴。
const azusa = new Azusa({
view: document.getElementById('app'),
subdivisionSize: 1024,
cutEnd: 256
});
const container = document.getElementById('bg')
container && (container.style.backgroundImage = "url('https://ws4.sinaimg.cn/large/006bYVyvly1g1tbar03aaj31hc0u0hdv.jpg')")
azusa.audio.load({
src: './media/s.mp3',
onPrgress: (xhr) => {
if(xhr.loaded == 11005954) {
console.log('加載完成');
};
}
});
azusa.audio.setVolume(0.5);
window.addEventListener('resize', () => {
azusa.resize(window.innerWidth, window.innerHeight);
})
$('.play').click(function(){
if ($(this).hasClass('fa-play')) {
azusa.audio.play();
console.log('zzbf')
$(this).addClass('fa-pause');
$(this).removeClass('fa-play');
} else {
azusa.audio.stop();
$(this).addClass('fa-play');
$(this).removeClass('fa-pause');
}
});
修改js的代碼虑粥，使用播放按鈕控制音樂播放如孝，停止。解決新版Chrome瀏覽器下不能自動播放的問題娩贷。暫時不能使音樂暫停再續(xù)播第晰，因為沒在代碼里找到pause的方法，只找到了個stop停止的方法彬祖，但是會導致音樂重新播放茁瘦。其中stop還需要修改azusa.js代碼給它定義實現(xiàn)，代碼如下：
Audio.prototype.stop = function(){
this.sound.stop();
};
至于我為啥知道sound有stop方法储笑，當然是看源碼知道的啊甜熔。然后隨帶把load方法里面的play也去掉了，點擊播放的時候再調(diào)用play方法突倍。
未解決bug
網(wǎng)頁打開后極短時間內(nèi)點擊播放按鈕并不能播放音樂腔稀，要延遲個二三秒鐘點擊播放按鈕才解決盆昙，有大佬知道原因的歡迎留言~
完。
