优质广告供应商

广告是为了更好地支持作者创作

媲美AE特效的Web音乐播放器——Azusa!

image

又是一期新的特效安利,咳咳,准确说应该是第二期。如上图,这次介绍的就是上次说过的炫酷音乐播放器——Azusa!

Azusa

Three.js开发,媲美AE特效的网页端音乐播放器!
作者大佬:EYHN
Azusa代码仓库:github.com/EYHN/Azusa
demo预览:www.hojun.cn/azusa
gif图预览:

image

视频预览:
https://www.bilibili.com/video/av48789169

网页使用教程

参考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信息,发现作者开发的使用使用的是three.js的0.85.0版本。所以需要指明three版本,博主试过0.102以下版本都行。
  • 降低了thress.js版本后还需要在服务器环境下运行才能查看效果。
  • 音乐在新版谷歌浏览器下不能制动播放,要加用户交互才行

博主修改过程

第一步,使用git clone 命令 克隆Azusa github源码。

git clone git@github.com:EYHN/Azusa.git

看源码虽然吃力,但是了解这个项目最好的途径。

第二步,修改example的代码,解决之前发现的问题。

<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的依赖。

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浏览器下不能自动播放的问题。暂时不能使音乐暂停再续播,因为没在代码里找到pause的方法,只找到了个stop停止的方法,但是会导致音乐重新播放。其中stop还需要修改azusa.js代码给它定义实现,代码如下:

Audio.prototype.stop = function(){
  this.sound.stop();
};

至于我为啥知道sound有stop方法,当然是看源码知道的啊。然后随带把load方法里面的play也去掉了,点击播放的时候再调用play方法。

未解决bug

网页打开后极短时间内点击播放按钮并不能播放音乐,要延迟个二三秒钟点击播放按钮才解决,有大佬知道原因的欢迎留言~

完。

优质广告供应商

广告是为了更好地支持作者创作

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 26,288评论 1 45
  • hello everybody,我是你们的骚年同学~ 非常抱歉迟迟没有更新,只能让你们看我的碎碎念~ 快期末了,跟...
    袁家有女就是我阅读 79评论 0 0
  • 优质广告供应商

    广告是为了更好地支持作者创作

  • 摘自附中情意馆 本文作者永乐大帝二世,是一位商业银行HR,接待了一群到银行的实习生,然后观察他们人生发生的一系列的...
    dmpfczxtfi阅读 299评论 0 0
  • 列夫·托尔斯泰,一座令人景仰的圣山,人们将他视为世界文学史上继古希腊文学、莎士比亚之后的第三个高峰;《战争与...
    猫一只阅读 1,014评论 5 12
  • 2019年1月16日 晴 星期三 农历腊月十一 投资孩子,就是投资自己后半生的幸福 今天跟五年级一位美女妈妈聊...
    博奥跆拳道权教练阅读 114评论 0 2