Code Monkey home page Code Monkey logo

meplayer's Introduction

mePlayer

npm

一款简洁的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()可一键切换主题

致谢

meplayer's People

Contributors

harryfight avatar newraina avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

meplayer's Issues

关于播放器的一些建议

很棒的播放器!不过建议加入一些好用的功能。

  • 事件绑定,如APlayer一样

  • 可以配置是否自动播放

原文與翻譯歌詞接口

如題,希望能有原文與翻譯歌詞的接口,或是提供一次顯示並捲動兩行歌詞的功能,感謝!

歌词修复,播放开始的状态修改

191行与192行 歌词换行错位修改:
lyricArea.style.webkitTransform = 'translateY(-' + tempLrcLines[tempLrcIndex].offsetTop + 'px)'; lyricArea.style.transform = 'translateY(-' + tempLrcLines[tempLrcIndex].offsetTop + 'px)';
因谷歌浏览器会禁止自动播放,会导致播放器class是播放状态,但并没有播放,
251行play()的addClass移至新建个播放事件里:audio.addEventListener('play', handleAudioStart);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.