audio.gif

介绍

一个 canvas 可视化波形音频播放器。

一直想找个机会写一个播放器的功能,这次终于可以如愿实现了,前后花了几周的时间,主要是自己本身也有工作,也确实有点懒散,写一下放一下,磕磕绊绊的总算是做了自己满意的样子。

想做播放器是很早的想法,但没有找到好看合适的界面设计,就这个界面还是我翻来国外的音乐网站 soundcloud 仿的,不算很一样,用起来也不差多少,觉得里面的评论功能有点厉害,对着界面就搞了一下。说道里面的波形处理,是用的 canvas 画出来的线条,原理其实也很简单,就是获取音频的流文件,处理里面的 pcm 数据,在计算一下得到柱状的高度,做两个反差的效果,具体的可以看代码写法。

功能

插件支持两种模式,歌单和单曲的模式。

  • 歌单模式:就是一个列表,可以轮训播放。
  • 单曲模式:就是单首歌曲,可以提交评论操作,歌曲时间滚动到节点显示评论,如果需要评论保存,那就需要对接处理。

audio1.gif

代码

其实没啥好写的,主要就是canvas渲染的部分,其他的代码量基本就是在操作音频数据或者说是对dom的操作,然后做一些边界处理。

值的注意讲的几个点。

  1. 动画使用的是 requestAnimationFrame 操作
  2. canvas 画布在渲染的时候会出现模糊的情况,可以先放大然后在缩小倍数让图像文字变得清晰
  3. 使用 Map 保存数据,确保第二次渲染不需要重新加载数据
  4. 在渲染评论时做了一个小的算法,如何在数组内寻找最接近传入值的索引,目的是为了定位头像和评论位置

api

待做。

计划

可能会考虑多做几个样式模式和支持其他的功能。
喜欢可以点个小爱心

预览地址 -> 猛戳这里

- THE END -

分享到:
Like

目录

    评论 (2)

    • 昵称
    • 邮箱
    • 网址
    1. 锦

      曾经计划过以音乐为核心展开各种交互的博客主题,又因为懒,不了了之了。哈哈哈哈哈

      1. lus
        lus 博主

        我也有想过搞一个音乐APP自用,最后嫌太麻烦扔下了。