简洁的 HTML5 音乐播放器

mePlayer


一款简洁的HTML5音乐播放器。内置两套主题,可在运行时一键切换, 点我在线预览




默认主题

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



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



使用方法

  • 引入dist文件夹中相关文件,或者npm install meplayer
  • 初始化
mePlayer({
    theme: '可选,不指定时为默认主题,值为"mini"时为迷你版主题',
    music : {
        src   : '音乐文件地址',
        title : '歌名',
        author: '歌手名',
        cover : '封面路径',
        lrc   : '歌词字符串:[00:24.600]温柔的晚风\n[00:27.830]轻轻吹过 爱人的梦中\n ...'
    },
    target: '放置播放器的DOM容器,如: .music',
    autoplay: false // 是否自动播放
});复制代码


  • 运行中可使用meplayer.play()meplayer.pause()手动播放暂停
  • meplayer.toggleTheme()可一键切换主题


转自官方描述


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值