├── README.md ├── bin ├── MusicPlayer.vue └── enhanceAppFile.js ├── index.js ├── package.json └── util └── index.js /README.md: -------------------------------------------------------------------------------- 1 | ## 0. 欢迎在vuepress中使用noxone-music-player 2 | 嗯... 这是我的第一个音乐播放器插件，基于2020年自己写的[音乐播放器demo](https://dragon-chen777.github.io/Music-player/)进行重构，喜欢的话，这里是[Github传送门](https://github.com/Dragon-chen777/vuepress-plugin-music-player)，求求大佬在右上角点个⭐⭐噢，您的支持就是我创作的最大动力！ 3 | 4 | 效果图如下： 5 | 6 | **播放器展开** 7 | 8 | ![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6fb27c713dd4fb186f5f9052c691e28~tplv-k3u1fbpfcp-zoom-1.image) 9 | 10 | **播放器隐藏** 11 | 12 | ![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12e346847bc44a17bc1193fc277d0747~tplv-k3u1fbpfcp-zoom-1.image) 13 | 14 | 交互效果强烈推荐到我的小破站去体验喔~ 15 | 16 | 喏，这里是传送门：[NOxONE](https://dragon-chen777.github.io/NOxONE/) 17 | 18 | ## 1. 导入 19 | ```sheel 20 | npm i @noxone/vuepress-plugin-music-player 21 | ``` 22 | ## 2. 配置 23 | ```js 24 | // ./docs/.vuepress/config.js 25 | module.exports = { 26 | // ... 27 | plugins: [ 28 | [ 29 | "vuepress-plugin-music-player", // 导入noxone播放器 30 | { 31 | musicList: [ // 音乐列表必填 32 | { 33 | cover: 'https://dragon-chen777.github.io/Music-player/img/Mojito.jpg', // 音乐封面 34 | title: 'Mojito', // 音乐标题 35 | link: 'https://dragon-chen777.github.io/Music-player/music/Mojito.mp3', // 音乐路径 36 | }, 37 | // 或者，在 ./docs/.vuepress/public文件夹存放资源，使用相对路径的方式配置 38 | { 39 | cover: '/imgs/Mojito.jpg', 40 | title: 'Mojito', 41 | link: '/music/Mojito.mp3', 42 | }, 43 | ], 44 | containerBg: '#fff', // 播放器背景色可选 45 | themeColor: '#0cdae9', // 主题色可选 46 | musicInfoBg: 'rbga(255,255,255)', // 音乐信息背景可选 47 | musicTitleColor: '#000', // 音乐标题颜色可选 48 | zoom: 0.7, // 播放器缩放大小可选（默认移动端尺寸缩小一半） 49 | bottom: '50px', // 播放器的bottom值可选（默认采用fiex定位，bottom为50px） 50 | } 51 | ] 52 | } 53 | ``` 54 | ## 3.新增 55 | 56 | 1. 向全局`window`挂载`noxone`以实现事件发布订阅 57 | `订阅播放事件` 58 | ```js 59 | window.noxone.Bus.$on( 60 | 'playNoxoneMusic', 61 | function musicPlay(){ 62 | _this.playMusic('play') 63 | } 64 | ) 65 | ``` 66 | `订阅上下切换歌曲事件` 67 | ```js 68 | window.noxone.Bus.$on( 69 | 'playPreNoxoneMusic', 70 | function musicPlay(){ 71 | _this.playMusic('pre') 72 | } 73 | ) 74 | window.noxone.Bus.$on( 75 | 'playNextNoxoneMusic', 76 | function musicPlay(){ 77 | _this.playMusic('next') 78 | } 79 | ) 80 | ``` 81 | 意味着，您可以通过例如`window.onxone.$emit('playNoxoneMusic')`的方式让音乐组件播放 82 | 2. 修复移动端noxoneMuiscPlayer组件初始显示尺寸异常问题 83 | 84 | -------------------------------------------------------------------------------- /bin/MusicPlayer.vue: -------------------------------------------------------------------------------- 1 | 31 | 138 | 292 | -------------------------------------------------------------------------------- /bin/enhanceAppFile.js: -------------------------------------------------------------------------------- 1 | import MusicPlayer from './MusicPlayer.vue' 2 | export default ({ Vue }) => { 3 | Vue.component('MusicPlayer', MusicPlayer) 4 | } 5 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | module.exports = (opts, ctx) => ({ 3 | define() { 4 | const { musicList, containerBg, themeColor, musicInfoBg, titleColor, zoom, bottom, zIndex } = opts 5 | 6 | if (!musicList || !Array.isArray(musicList)) return console.error('@noxone/vuepress-plugin-music-player：', 'musicList is needed!') 7 | 8 | const CONTAINER = { 9 | containerBg: containerBg || '#fff', 10 | themeColor: themeColor || '#0cdae9', 11 | musicInfoBg: musicInfoBg || 'rgba(255, 255, 255, 0.5)', 12 | musicTitleColor: titleColor || '#000', 13 | zoom: zoom || 0.7, 14 | bottom: bottom || '50px', 15 | zIndex: zIndex || 1 16 | } 17 | return { 18 | CONTAINER, 19 | MUSIC_LIST:musicList 20 | } 21 | }, 22 | enhanceAppFiles: resolve(__dirname, './bin/enhanceAppFile.js'), 23 | globalUIComponents: 'MusicPlayer' 24 | }) 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@noxone/vuepress-plugin-music-player", 3 | "version": "1.2.0", 4 | "description": "this is a tiny but awesome musicPlayer for vuepress", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "Vue", 11 | "Vuepress", 12 | "MusicPlayer", 13 | "Plugin" 14 | ], 15 | "author": "noxone", 16 | "license": "ISC" 17 | } 18 | -------------------------------------------------------------------------------- /util/index.js: -------------------------------------------------------------------------------- 1 | function setAnimation(dom, animationName, animationEndCb) { 2 | dom.classList.add(animationName) 3 | animationEndCb && dom.addEventListener('animationend', animationEndCb) 4 | } 5 | 6 | class Bus { 7 | constructor() { 8 | this.taskQueue = {} 9 | this.taskQueueOfOnce = {} 10 | } 11 | 12 | $on(event, listener) { 13 | let taskQueue = this.taskQueue 14 | if (!taskQueue[event]) taskQueue[event] = [] // 建立事件订阅队列 15 | if (!taskQueue[event].includes(listener)) taskQueue[event].push(listener) // 向队列添加事件订阅者 16 | console.log(`%c 已通过window.noxone.noxone.Bus.$on("${event}", ${listener.name|| '()=>{...}'})订阅事件`, 'color: #00a1d6') 17 | console.log(`%c 等待window.noxone.noxone.Bus.$emit("${event}")发布事件`, 'color: #00a1d6') 18 | } 19 | 20 | $once(event, listener) { 21 | let taskQueueOfOnce = this.taskQueueOfOnce 22 | if (!taskQueueOfOnce[event]) taskQueueOfOnce[event] = [] // 建立事件订阅队列 23 | if (!taskQueueOfOnce[event].includes(listener)) taskQueueOfOnce[event].push(listener) // 向队列添加事件订阅者 24 | console.log(`%c 已通过window.noxone.noxone.Bus.$on("${event}", ${listener.name || '()=>{...}'})订阅事件`, 'color: #00a1d6') 25 | console.log(`%c 等待window.noxone.noxone.Bus.$emit("${event}")发布事件`, 'color: #00a1d6') 26 | } 27 | 28 | $remove(event, listener) { 29 | let queue = this.taskQueue[event] || this.taskQueueOfOnce[event] 30 | if (!queue) return 31 | 32 | let idx = queue.indexOf(listener) 33 | idx > -1 && queue.splice(idx, 1) // 移除事件订阅者 34 | } 35 | 36 | $emit(event) { 37 | console.log(`%c 已通过window.noxone.noxone.Bus.$emit("${event}")发布事件`, 'color: #00a1d6') 38 | if (this.taskQueue[event]) { 39 | let queue = this.taskQueue[event] 40 | 41 | for (let listener of queue) { 42 | if (listener.name) console.log(`%c 触发${listener.name}事件 ^_^`, 'color: #00a1d6') 43 | else console.log(`%c 触发未知事件（某人定义了箭头函数或定义的函数没有名字） ^_^`, 'color: #00a1d6') 44 | listener() 45 | } 46 | } 47 | if (this.taskQueueOfOnce[event]) { 48 | let queue = this.taskQueue[event] 49 | while (queue.length) { 50 | let listener = queue.unshift() 51 | listener() 52 | if (listener.name) console.log(`%c 触发${listener.name}事件 ^_^`, 'color: #00a1d6') 53 | else console.log(`%c 触发未知事件（某人定义了箭头函数或定义的函数没有名字） ^_^`, 'color: #00a1d6') 54 | 55 | } 56 | } 57 | } 58 | 59 | $has(event, listener) { 60 | return (this.taskQueue[event] && this.taskQueue.includes(listener)) || (this.taskQueueOfOnce[event] && this.taskQueueOfOnce.includes(listener)) 61 | } 62 | } 63 | 64 | export { 65 | setAnimation, 66 | Bus 67 | } --------------------------------------------------------------------------------