{"_id":"@d1ci/vue-audio-player-updated","_rev":"1-4ddefc2f0ab1c784d9f823bcbf1df4e3","name":"@d1ci/vue-audio-player-updated","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@d1ci/vue-audio-player-updated","version":"1.0.0","description":"liripeng/vue-audio-player themeColor udpated","main":"index.js","scripts":{"test":"dev"},"repository":{"type":"git","url":"git+https://github.com/Da-ci/vue-audio-player-updated.git"},"author":{"name":"da-ci"},"license":"ISC","bugs":{"url":"https://github.com/Da-ci/vue-audio-player-updated/issues"},"homepage":"https://github.com/Da-ci/vue-audio-player-updated#readme","gitHead":"6027b32d2539888726bcf2b78d96f3108a5636fb","_id":"@d1ci/vue-audio-player-updated@1.0.0","_nodeVersion":"16.15.0","_npmVersion":"8.0.0","dist":{"integrity":"sha512-qgGOXHdqhyDuQ9EstP2KtbudPd5QN3O0nN/aPdbz3MXXhDtb2LxJIP/r516YBKqT4Ezy1ORXqfQQJ6c9k6s0gw==","shasum":"29773c3002365b8f8f849579f2549e98e420646b","tarball":"https://registry.npmjs.org/@d1ci/vue-audio-player-updated/-/vue-audio-player-updated-1.0.0.tgz","fileCount":10,"unpackedSize":32832,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4wOL5PWR2OK0OXlbtzAjAwYZSrbdmHxTluBLyVNU72AiBHFpqvEt26iHcc+lFa3nWSplexgfv+PpP/ZHSVGYyPJA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjFJKQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpleRAAjWv3kajT1Oy9aTPhbgO2JYcQeYtM3yjpdUZzqvZn3sjvviie\r\nG82To2P0S3LfQG33HvFLSw+Bdpyif69coXFB4Rk3SVoAU7DlIy812P57UaGG\r\nbzMWkSbQwHGGWinvKz1upXRajJRjRamCYqErKdF8J0nFdEZhKOx/f3BV8QKN\r\nnZwWiEiZFUwDxBdEmyVhF4e+4nFLt3gc52zIzxmBscl0xsYvvQ0pv5G4JSpW\r\nIxGa2D3hRoK9gB9DRNU+SOisghvf5G66NmqaLWpDdqGpY2/s0iHs0KLRJXRq\r\ndt96gFVC+stS/pmp86kWhjj1ou47CZOPWnNUGKI36Y9Jl9sreyPyIWZRTS10\r\nX8dt+5rIpTev+j8kou7NMvTmDJoOM+5ghNNDfau0roYXdTFEcfL2rz3BuSHy\r\nGrS5ViX63i3HeyZyRL4jdqvn4q5Oc7nM4J0e77vOG03HQaqySltmpPOEY4wm\r\n/0iqQYPY7xxgeSffqCcSAgiLPWAnLbowqAhmdCGIN6K4WQO+qrwA/t56wtrV\r\n2QUBsLaUmNahCXA/vgBQdtWFLcExX5+PlknpxFOshdMvyiBPomU4SyQzya6T\r\nHvkBp/Q4ikOa3vlKLUikGXB2UcNkg6sMBCymRtnpnnbrCmbb4wtjzxYkvoCk\r\n2ZFGC1xYXQc+BGC2w8E3DqtT4vjvRAA9kUo=\r\n=gMFX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"d1ci","email":"ali.silarbi00@gmail.com"},"directories":{},"maintainers":[{"name":"d1ci","email":"ali.silarbi00@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-audio-player-updated_1.0.0_1662292623913_0.903230032077817"},"_hasShrinkwrap":false},"1.0.1":{"name":"@d1ci/vue-audio-player-updated","version":"1.0.1","description":"liripeng/vue-audio-player updated","license":"MIT","author":{"name":"github/Da-ci"},"private":false,"main":"./packages/index.js","keywords":["liripeng","vue-audio-player","vue-audio","vue-music","audio-player","audio","音频","音乐","播放器"],"scripts":{"dev":"vite","build":"vite build --emptyOutDir","preview":"vite preview"},"repository":{"type":"git","url":"git+https://github.com/Da-ci/vue-audio-player.git"},"dependencies":{"@any-touch/core":"^2.0.2","@any-touch/pan":"^2.0.2","@liripeng/vue-audio-player":"^1.4.0","vue":"^3.2.31","vue-router":"^4.0.14"},"devDependencies":{"@vitejs/plugin-vue":"^2.2.4","@vue/eslint-config-prettier":"^7.0.0","eslint":"^8.11.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.5.0","prettier":"^2.6.0","vite":"^2.8.6"},"gitHead":"672c595072d411a58e26c32509d508a510357813","bugs":{"url":"https://github.com/Da-ci/vue-audio-player/issues"},"homepage":"https://github.com/Da-ci/vue-audio-player#readme","_id":"@d1ci/vue-audio-player-updated@1.0.1","_nodeVersion":"16.15.0","_npmVersion":"8.0.0","dist":{"integrity":"sha512-sUOfZnO3donddL/QP84OQ7ZxVvUeOz+vYQlTJUXO9hOuNloAAXpkes7MGRUiZhwud24jY36qvBsuasEY2bNNpg==","shasum":"05cf1dec9c4f8e3ad385686f413a5248fd12440b","tarball":"https://registry.npmjs.org/@d1ci/vue-audio-player-updated/-/vue-audio-player-updated-1.0.1.tgz","fileCount":5,"unpackedSize":37919,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQ4Mjw4ZKv8ijv1+UEx7D43OVwWzgvXcvFTiOwpnqBSAiEA83LYj/8jbKjBUFidGheQ5aeIE/hel449YB5pt5NAaJk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjFJkwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowVRAAhFZn6OCDKQLmlLrmDUrhzVldehwPbA8cA/Ao6pC25LeegB7o\r\nsOUAiynJfw1JkcAN1H26/HWMiNsDh4haHNACzJPEkXHEaqundIxkNIjP34SH\r\nBMcOc0Eyc+kiEfRIUvT0IUdKkbe7j+OuYImFzxvMApKBD4pEhOPRtyCL/zzc\r\nlSwYnx6gbIEidkV2sVLVDfr0fRIhh7CO+QKUOFR9i7ncPvhgtOMe06TZ2wIY\r\nhnjpRXYyNMU320eHlO5JRJ/eMuq+W45/FdWXV8ASfBkUHXEGMuk/cRv5MQA3\r\nFCNkZ0zLvWTbw3K+/niBBy+D5a5DxwhDJSdOZHQlzLLl0lU037R+Hd0P6Q77\r\niCaIRv+1nq8foCX9j/gDAXJohvm0iUPMj7r51vBRgYSfFw5fN/q+aeOyZJ6i\r\ndFNcdaV0EWlcXpwrpvAwp3R2ho/ddGcK8qLwHk3vMeTjqUnrUp0xqobUDuy1\r\nBCzANoqqqs2zKtGFemkNTlPcZ+OOxdb1661x4shcphTp6olbcQ4B0c8/bPvb\r\nGxdRPr/fYO4VdoobNFBUY5hAP/ipzscqeoDHRkCp9jRhbirvDBET60JCjm+u\r\nFoHkkQ0RWLimbdZ/rPfGD+lr93qGLZFNSW9xzPvft1WONmBGMIX/APp5w6aT\r\nsuxrApTEu9h0Kz0Au3XfC0uhtXmX7fTPfRk=\r\n=Base\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"d1ci","email":"ali.silarbi00@gmail.com"},"directories":{},"maintainers":[{"name":"d1ci","email":"ali.silarbi00@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-audio-player-updated_1.0.1_1662294320637_0.8519667878735151"},"_hasShrinkwrap":false}},"time":{"created":"2022-09-04T11:57:03.827Z","1.0.0":"2022-09-04T11:57:04.149Z","modified":"2022-09-04T12:25:20.879Z","1.0.1":"2022-09-04T12:25:20.806Z"},"maintainers":[{"name":"d1ci","email":"ali.silarbi00@gmail.com"}],"description":"liripeng/vue-audio-player updated","homepage":"https://github.com/Da-ci/vue-audio-player#readme","repository":{"type":"git","url":"git+https://github.com/Da-ci/vue-audio-player.git"},"author":{"name":"github/Da-ci"},"bugs":{"url":"https://github.com/Da-ci/vue-audio-player/issues"},"license":"MIT","readme":"<h3 align=\"center\" style=\"margin: 30px 0 35px;\">Vue Audio Player Component</h3>\r\n\r\n<p align=\"center\">\r\n    <img src=\"https://img.shields.io/npm/v/@liripeng/vue-audio-player.svg\" />\r\n    <img src=\"https://img.shields.io/bundlephobia/min/@liripeng/vue-audio-player\" />\r\n    <img src=\"https://img.shields.io/github/stars/1014156094/vue-audio-player\" />\r\n    <img src=\"https://img.shields.io/github/forks/1014156094/vue-audio-player\" />\r\n    <img src=\"https://img.shields.io/github/license/1014156094/vue-audio-player\" />\r\n</p>\r\n\r\n---\r\n\r\n## [中文文档](./README-cn.md) | **English Document**\r\n\r\n## <a href=\"https://codesandbox.io/s/liripengvue-audio-player-issue-moban-cb57s?file=/src/App.vue&resolutionWidth=320&resolutionHeight=675\">Online Demo</a>\r\n\r\n## Features\r\n- `Vue2` and `Vue3` are supported\r\n- Simple and practical\r\n- High versatility\r\n- Support for progress bar dragging\r\n- Supports PC and mobile terminals\r\n- Complete documentation and examples\r\n\r\n## Use\r\n### Step one：\r\n```\r\nnpm i -S @liripeng/vue-audio-player\r\n```\r\n\r\n### Step two：\r\n```\r\n// global import\r\nimport AudioPlayer from '@liripeng/vue-audio-player'\r\n\r\nVue.use(AudioPlayer)\r\n```\r\nor\r\n```\r\n// part import\r\nimport AudioPlayer from '@liripeng/vue-audio-player'\r\n\r\ncomponents: {\r\n  AudioPlayer\r\n}\r\n```\r\n\r\n### Step three：\r\n```\r\n<template>\r\n  <div>\r\n    {{ currentAudioName || audioList[0].name }}\r\n    <audio-player\r\n      ref=\"audioPlayer\"\r\n      :audio-list=\"audioList.map(elm => elm.url)\"\r\n      :before-play=\"handleBeforePlay\"\r\n      theme-color=\"#ff2929\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  data() {\r\n    return {\r\n      currentAudioName: '',\r\n      audioList: [\r\n        {\r\n          name: 'audio1',\r\n          url: 'https://www.0dutv.com/upload/dance/F25F74A0B8FF82503241801D0E2CA5CD.mp3'\r\n        },\r\n        {\r\n          name: 'audio2',\r\n          url: 'https://www.0dutv.com/upload/dance/20200316/C719452E3C7834080007662021EA968E.mp3'\r\n        }\r\n      ]\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    // Something to do before playing\r\n    handleBeforePlay(next) {\r\n      // There are a few things you can do here...\r\n      this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name\r\n\r\n      next() // Start playing\r\n    }\r\n  }\r\n}\r\n</script>\r\n```\r\n\r\n## Prop\r\n| Prop | Explain | Type | Default |\r\n| - | - | - | - |\r\n| audio-list | Audio playlist | `Array` | - |\r\n| playback-rates | Playrate setting list | `Array<Number>` | `[0.5, 1, 1.5, 2]` |\r\n| show-play-button | Whether to display the play button | `Boolean` | `true` |\r\n| show-prev-button | Whether to display the previous button | `Boolean` | `true` |\r\n| show-next-button | Whether to display the next button | `Boolean` | `true` |\r\n| show-volume-button | Whether to display the volume button | `Boolean` | `true` |\r\n| show-progress-bar | Whether to display a progress bar | `Boolean` | `true` |\r\n| show-playback-rate | Whether to display the play rate button | `Boolean` | `true` |\r\n| isLoop | Whether the list plays in a loop | `Boolean` | `true` |\r\n| disabled-progress-drag | Disable progress bar drag functionality | `Boolean` | `false` |\r\n| disabled-progress-click | Disable progress bar clickable functionality | `Boolean` | `false` |\r\n| progress-interval | Progress update interval | `Number` | `1000` |\r\n| theme-color | Theme color | `String` | `#e35924` |\r\n| before-play | The callback function before the play starts<br>The play starts after `next()` is called | `(next)=>void` | - |\r\n| before-prev | Play the previous callback function<br>After calling `next()`, the previous song starts playing | `(next)=>void` | - |\r\n| before-next | Play the callback function before the next song<br>After calling `next()`, the next song starts playing | `(next)=>void` | - |\r\n| The rest is consistent with native `audio` |\r\n\r\n## Event\r\n| Event | Explain | Callback |\r\n| - | - | - |\r\n| play | Triggers when the play starts | - |\r\n| pause | Trigger after play pause | - |\r\n| play-prev | Triggers after playing the previous song | - |\r\n| play-next | Triggers after playing the next song | - |\r\n| play-error | Triggered after play error,The parameters are the same as those of the native 'play' method | `data` |\r\n| playing | The play fires every `progressInterval` second | - |\r\n| timeupdate | Triggered when the current play position is sent to change | `event` |\r\n| loadedmetadata | The run script is triggered when the duration of the media element and other media have loaded data | `event` |\r\n| ended | Trigger after audio playback | `event` |\r\n| progress-start | Trigger before moving the progress bar | `event` |\r\n| progress-move | Triggered when moving the progress bar | `event` |\r\n| progress-end | Triggered after moving the progress bar | `event` |\r\n| progress-click | Click the progress bar to trigger | `event` |\r\n\r\n## Slot\r\n| Name | Explain |\r\n| - | - |\r\n| play-prev | Play prev button,The replaceable button icon function remains unchanged |\r\n| play-start | Play start button,The replaceable button icon function remains unchanged |\r\n| play-pause | Play pause button,The replaceable button icon function remains unchanged |\r\n| play-next | Play next button,The replaceable button icon function remains unchanged |\r\n\r\n## Data\r\n| Variable | Explain | Default |\r\n| - | - | - |\r\n| currentPlayIndex | The audio index currently playing | `0` |\r\n| isPlaying | Whether the audio is playing | `false` |\r\n| duration | Audio duration | `''` |\r\n| currentTime | Current playback time of audio | `''` |\r\n| playbackRate | Current playback rate of audio | `1` |\r\n\r\nCall with `ref`，see the components for more [data](https://github.com/1014156094/vue-audio-player/blob/master/packages/audio-player/index.vue)\r\n\r\n## Method\r\n| Method | Explain | Callback |\r\n| - | - | - |\r\n| play | Start | - |\r\n| pause | Pause | - |\r\n| playPrev | Previous | - |\r\n| playNext | Next | - |\r\n\r\nCall with `ref`，see the components for more [methods](https://github.com/1014156094/vue-audio-player/blob/master/packages/audio-player/index.vue)\r\n\r\n## Update log\r\n\r\n### v1.5.0【2022/03/20】\r\n- Feature：`Vue2` and `Vue3` work fine\r\n- Feature：Don't need import `CSS` file\r\n### v1.4.0【2022/03/05】\r\n- Feature：Slot `play-prev`、`play-start`、`play-pause` and `play-next`\r\n- Feature：`play-error` event\r\n- Improvement：Appearance and layout\r\n### v1.3.0【2022/01/25】\r\n- Improvement：Reduced package volume\r\n- Modify：Style import changed to `import '@liripeng/vue-audio-player/lib/style.css'`\r\n### v1.2.11【2021/06/17】\r\n- Feature：`disabled-progress-drag` prop\r\n- Feature：`disabled-progress-click` prop\r\n- Feature：`progress-start` event\r\n- Feature：`progress-move` event\r\n- Feature：`progress-end` event\r\n- Feature：`progress-click` event\r\n\r\n## FAQ\r\n\r\n- <a href=\"https://github.com/1014156094/vue-audio-player/issues/21\">Background playback control is not supported?</a>\r\n- <a href=\"https://github.com/1014156094/vue-audio-player/issues/46\">The browser of some mobile phones is 0 after loading due to asynchronous problems</a>\r\n- <a href=\"https://github.com/1014156094/vue-audio-player/issues/50\">Unable to play automatically?</a>\r\n- Realize custom play position or continue to play?\r\n\r\n  Example:\r\n  ```js\r\n  this.$refs.audioPlayer.$refs.audio.currentTime = 100 // Jump to 100 seconds\r\n  ```\r\n\r\n## Browser compatibility\r\n\r\n- Internet Explorer：not support\r\n- Firefox：`53` and above\r\n- Chrome：`51` and above\r\n\r\n## License\r\n`MIT`\r\n\r\n## Last\r\n😘If you think it's helpful, click a 'Star',Any problem found in the process of use can be raised `Issue`, also very welcome to mention `PR`.\r\n","readmeFilename":"README.md","keywords":["liripeng","vue-audio-player","vue-audio","vue-music","audio-player","audio","音频","音乐","播放器"]}