介绍

  • 优点:简洁、实用
  • 缺点:不够漂亮、封面图如果太黑的话会导致文字看不清
  • 使用方法:将代码压缩包解压到你项目的根目录,然后引入下面的代码即可
  • 注意:歌词要求是lrc格式的歌词,并且要求换行都转化成\n

代码如下:

<div id="html5-musicplayer" song-avatar="封面图url" song-title="歌名" song-author="歌手" song-src="歌曲资源url" song-lrc="歌曲lrc格式的歌词"></div>

<script src="/html5-musicplayer/index.js"></script>

效果如下:

附:云村获取歌曲和歌词的方式

  • 在网页中打开一个歌曲,获取id
  • 获取歌曲链接:https://music.163.com/song/media/outer/url?id=xxx.mp3
  • 获取歌词链接:https://music.163.com/api/song/lyric?os=pc&id=xxx&lv=-1&kv=-1&tv=-1
  • 推荐一个获取音乐外链的网站