又是一期新的特效安利,咳咳,准确说应该是第二期。如上图,这次介绍的就是上次说过的炫酷音乐播放器——Azusa!
Azusa
Three.js开发,媲美AE特效的网页端音乐播放器!
作者大佬:EYHN
Azusa代码仓库:github.com/EYHN/Azusa
demo预览:www.hojun.cn/azusa
gif图预览:
视频预览:
网页使用教程
参考Azusa仓库地址的教程的umd部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <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信息,发现作者开发的使用使用的是three.js的0.85.0版本。所以需要指明three版本,博主试过0.102以下版本都行。
- 降低了thress.js版本后还需要在服务器环境下运行才能查看效果。
- 音乐在新版谷歌浏览器下不能制动播放,要加用户交互才行
博主修改过程
第一步,使用git clone 命令 克隆Azusa github源码。
1
| git clone git@github.com:EYHN/Azusa.git
|
看源码虽然吃力,但是了解这个项目最好的途径。
第二步,修改example的代码,解决之前发现的问题。
1 2 3 4 5 6 7
| <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.8.1/css/all.min.css"><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的依赖。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| const azusa = new Azusa({ view: document.getElementById('app'), subdivisionSize: 1024, cutEnd: 256 }); const container = document.getElementById('bg') container && (container.style.backgroundImage = "url('https://cdn.jsdelivr.net/gh/honjun/ImageHosting/sina/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浏览器下不能自动播放的问题。暂时不能使音乐暂停再续播,因为没在代码里找到pause的方法,只找到了个stop停止的方法,但是会导致音乐重新播放。其中stop还需要修改azusa.js代码给它定义实现,代码如下:
1 2 3
| Audio.prototype.stop = function(){ this.sound.stop(); };
|
至于我为啥知道sound有stop方法,当然是看源码知道的啊。然后随带把load方法里面的play也去掉了,点击播放的时候再调用play方法。
未解决bug
网页打开后极短时间内点击播放按钮并不能播放音乐,要延迟个二三秒钟点击播放按钮才解决,有大佬知道原因的欢迎留言~
完。
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦