演示
前言
其实这个很简单,这个播放器用到了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">
然后在文章里添加
THE END
原文链接:https://www.rxs9.cn/1601.html?corderby=comment_date_gmt
© 版权声明
声明📢本站内容均来自互联网,归原创作者所有,如有侵权必删除。
本站文章皆由CC-4.0协议发布,如无来源则为原创,转载请注明出处。
THE END