子比主题文章引入一个音乐播放器

演示

推荐一首好听的纯音乐

2年前

264644

前言

其实这个很简单，这个播放器用到了mePlayer

默认主题

• 有歌词时滚动显示歌词，无歌词时显示模拟频谱动画
• 播放中鼠标悬停在界面上滑动滚轮可调节音量，音量大小用音量条表示

迷你主题

• 去掉了大部分控件，仅保留音量调节和播放暂停按钮
• 播放中鼠标悬停在界面上滑动滚轮可调节音量，音量大小用音量图标透明度表示

演示代码

<div class="me-container">
    <div class="music"></div>
</div>
<script>
    mePlayer({
  theme: '', //这里是主题，可以填mini，或不填
  music : {
      src   : 'https://cos.uocin.com/%E3%82%84%E3%81%BE%E3%81%A0%E8%B1%8A%20-%20%E3%82%84%E3%82%8F%E3%82%89%E3%81%8B%E3%81%AA%E5%85%89%20%28%E6%9F%94%E5%92%8C%E4%B9%8B%E5%85%89%29.mp3',//mp3文件链接，这个需要换成你自己的。
      title : 'やわらかな光 (柔和之光)', //歌名
      author: 'やまだ豊', //歌手
      cover : 'https://y.gtimg.cn/music/photo_new/T002R500x500M000001dk4Js2DfEsY.jpg',//这里是图片封面，也可以是链接形式的
      lrc   : ''
    //lrc是歌词，当然你也可以不输入歌词，播放器会以频谱的样式播放
 },
  target: '.music',
  autoplay: false // 是否自动播放，这里我试了，自动播放不行，不知道是不是浏览器的问题
});
</script>

使用方法

直接在主题自定义代码引入js和css即可

<script src="//www.ytshopcn.com/font/meplayer.min.js"></script>
<link href="//www.ytshopcn.com/font/mplayer.min.css" rel="stylesheet">

然后在文章里添加自定义HTML将演示代码放进去就好了