这是一个可以为你的博客、前端静态项目添加的音乐播放器，并且使用方法极其简单，不到一分钟就可以完成添加，就和Jquery组件一样添加到项目即可。其主要是为了Typecho博客主题写的一个组件，但是想到其他静态项目也可以像这样添加并且使用，互联网上的H5播放器又太复杂，而且不照顾我们这些不使用Vue和npm包管理器 ( 不会使用 ) 的，因此开源出来，供大家使用。

暂时只适配了电脑端，手机端的后面有需求也将会适配。

TKPlayer前端静态音乐播放器源码 第5张插图

功能

显示歌曲信息

直接写一个audio标签不会显示歌曲信息，而TKPlayer会显示歌曲信息，例如歌曲名称、作曲家。

暂停/播放

这个也是常用的功能，没有一个播放器不能做的功能。

上一曲/下一曲

这也是相对于audio标签没有的功能，当你配置多个歌曲时，你可以使用上一曲/下一曲切歌。

显示播放时长

提供进度条和数字显示的方式，你可以很轻松的知道播放时长，和当前播放的位置。

调整播放进度

你可以将鼠标放到进度条上，当进度条变宽，你可以点击你想播放的位置，随意调整播放进度。

双击封面关闭

当我们不想播放音乐了，想关闭播放器，双击封面图片即可关闭。

详细使用教程