{"_id":"@billen/ng-waveform","_rev":"3-9fec5e7ce5c48cf827631058bf2b6292","name":"@billen/ng-waveform","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@billen/ng-waveform","version":"0.0.1","author":{"name":"Kulwinder Billen","email":"kbillen92@gmail.com"},"license":"MIT","dependencies":{"tslib":"^2.0.0"},"repository":{"type":"git","url":"git+https://github.com/billen/ng-waveform.git"},"gitHead":"9259858ee604894c233e94a3b8d7db0b4b2a045a","description":"Library to visualize audio waveform. Built as pure Angular library that doesn't wrap any of JS library. With NgWaveform you can create interactive customisable waveform of any audio file in your Angular application.","bugs":{"url":"https://github.com/billen/ng-waveform/issues"},"homepage":"https://github.com/billen/ng-waveform#readme","_id":"@billen/ng-waveform@0.0.1","_nodeVersion":"16.15.1","_npmVersion":"8.15.1","dist":{"integrity":"sha512-r8f6SL0IAI9J4xDhgzB9oPS+FjpqAPXlXcWJafD7YWLVs+YJEIfiz/fkw5Doqw2aaN+nO9J/MBJBhdAJFDnJAA==","shasum":"3f2cd34be6ffe9cebe6991a19e70099c914b1583","tarball":"https://registry.npmjs.org/@billen/ng-waveform/-/ng-waveform-0.0.1.tgz","fileCount":18,"unpackedSize":30276,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1YaLKqigzYcX9notxLKQHS0M8UNUuwrmWqhTsi8/k+AiEA2uRj9TB8TKROwS8OpxtEdITg3I1iEToXShMssm3EdEQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjn7IHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrvBAAnSFFJ1Qpa+yKnhmMSqoVSMMjpTDCUSQyrYMxn7Z0RFTH01WG\r\n4dAXportLZdziEGC2wfhPq4LoShhclZIM8xnT3m7ciYEZgpued7BqkyoqMPB\r\n27QjSQ1QBqHuIDtscNHVBpeCFlM5Lapm/vBBfFBdhF9c3MEAFfnl4uHJdrqd\r\nsgMqQFoga7iyN48W7C0U0DDtiRbxVFdFNr+JGl8gXYo2lpC7gwahHqHT31NL\r\nUBXLN+hXU0hFxlAB+oW01f3MRx9pGYwu1IjvSRBNDpu/QmAgqYUwr+rStjLV\r\nv8JjM9U8cBA0SpHkegkHl0XbRqvqRt6vUkdbzlbRXSs6vT3NCM1Nog9v6ILf\r\nk6AC+934u8G2kpUtNORzW8BNnjI+eA1Wu3/x23Phh88bc+Ppqi94FLZld3sE\r\najv5/0QANHuSamokyoq8v42pjaWlxPjPZC9zjLFBvZ2cnDQ28Q1xk9iXgAe1\r\nvM6bGfJVCM/6hs/JSGaNROoWGjn1crjrtlLR/EMlWRIcPSnGZohJPBvNc5Y7\r\nZoCglE5RggKWa7enNrWHwGNDRsirGR+78eN6MLHX8VECkBhbPo26mJ/2e3XI\r\nNMC8hz/XNaukUhlF7wHEdkhJZE3lDxejrpALJVCpIkfKaNKJIJA1yAWXowy3\r\nKIQvnZiB42OscAQup/jGAgJ8gdBpMe3XUB8=\r\n=wbvP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"billen","email":"kbillen92@gmail.com"},"directories":{},"maintainers":[{"name":"billen","email":"kbillen92@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-waveform_0.0.1_1671410183287_0.27971278863627624"},"_hasShrinkwrap":false},"0.0.2":{"name":"@billen/ng-waveform","version":"0.0.2","author":{"name":"Kulwinder Billen","email":"kbillen92@gmail.com"},"license":"MIT","dependencies":{"tslib":"^2.0.0"},"repository":{"type":"git","url":"git+https://github.com/billen/ng-waveform.git"},"gitHead":"218d26d55dd3335614998447346f2921f866b67e","description":"Library to visualize audio waveform. Built as pure Angular library that doesn't wrap any of JS library. With NgWaveform you can create interactive customisable waveform of any audio file in your Angular application.","bugs":{"url":"https://github.com/billen/ng-waveform/issues"},"homepage":"https://github.com/billen/ng-waveform#readme","_id":"@billen/ng-waveform@0.0.2","_nodeVersion":"16.15.1","_npmVersion":"8.15.1","dist":{"integrity":"sha512-vPadoLDfoG35K3VYt6tuRLeu9qjJL77h/tfALpVY7PDNdxgCORLCv/2+uhfuqFTc420tqUh0cc3xD03nuk0l0A==","shasum":"a21ec6ef3f13854714cbd61c87a78e2eb819c426","tarball":"https://registry.npmjs.org/@billen/ng-waveform/-/ng-waveform-0.0.2.tgz","fileCount":18,"unpackedSize":30274,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDfu6F0WSojBJzyM6/Qf7aXAHujYi/y1dnin7jDaqngfAiBhHYmVEoo/iBCYwV9DBJfjJYhXQHwzhoaXy+5dpwz1+A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjn7z5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRaw//W7mP5+J2+MV7LT43mXeTuGGupsFM0DQvNQawS09drQP3UpBd\r\nQZyzJ2UaTaSGuk461o30X4WHxZ9WlxThEDqn/gPO3b/NI9OUT/pPApCpMk/d\r\nxw6V1p8iV0pci3sVJpVwHEagHTqunneyX6oMhiLaoAccQT51JauOvm6xswNO\r\nvAAsy7qQiijdr9b7g1QD1IQMTywO853E2Pvpl2j/lOEY1r/7jmDxkz6RjWs7\r\nOslOf2QfgHnXeKFg6As2TSYNN75O5j26DRzi14BAvqIWWA64+vX9ZhP5OU+I\r\nxmqdq7BlLD/V8mazBBzBr/tDsY3rMx/OXSf5SBChmvFgRy2K/fQLH039yR5f\r\n9j8rPYXyceGw8XPPQPac44/81ZpIvZhLm33gZnOeNwzQzLsr3AaezrTQTOhU\r\n9GUJUTuvHf5H5f51D7DuD7N5RHR0AW+WxGXF0bmyKEo7dtyHMx1vXj63rKv6\r\njz/fnvey4qktAOC6X147iWlRUW4lXpsbXvzCkl+86YL583l9rrMKzrwYQ4ac\r\nByCrT+wlE5gza3ptrT0uO4UuFhMgXPQfYHitAHS42dDecVH7ymnRP3vKUrcx\r\n/4WV41IHTsEWjjcBpieqNz42P7774WYK5OteOGUEj75MTNwFWYEJ8Mz13cKo\r\nOtEBqoeesXKWCvKS06iv7+M7nTNivYFwMJg=\r\n=GIlw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"billen","email":"kbillen92@gmail.com"},"directories":{},"maintainers":[{"name":"billen","email":"kbillen92@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-waveform_0.0.2_1671412985704_0.8082137088972463"},"_hasShrinkwrap":false},"0.0.3":{"name":"@billen/ng-waveform","version":"0.0.3","author":{"name":"Kulwinder Billen","email":"kbillen92@gmail.com"},"license":"MIT","dependencies":{"tslib":"^2.0.0"},"repository":{"type":"git","url":"git+https://github.com/billen/ng-waveform.git"},"gitHead":"218d26d55dd3335614998447346f2921f866b67e","description":"Library to visualize audio waveform. Built as pure Angular library that doesn't wrap any of JS library. With NgWaveform you can create interactive customisable waveform of any audio file in your Angular application.","bugs":{"url":"https://github.com/billen/ng-waveform/issues"},"homepage":"https://github.com/billen/ng-waveform#readme","_id":"@billen/ng-waveform@0.0.3","_nodeVersion":"16.15.1","_npmVersion":"8.15.1","dist":{"integrity":"sha512-2N58C3Bnx+LSiEttjP9jGjZq5VRgA9oEcQUKBlMOYNK8S638Fxfrtk6mvzGq3a/XYEXziiOkauX9WawJYGhdjQ==","shasum":"13602ddb66cd1393589d6d246dc9c4b7b8c56c4a","tarball":"https://registry.npmjs.org/@billen/ng-waveform/-/ng-waveform-0.0.3.tgz","fileCount":19,"unpackedSize":31282,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDQDevjg0QRVTbUAST8YzkSZhFLIZdTjg03H8ZbNvziNAiAzx2rFXUiPfBnJ2eXBQmLcbV0gYCjE/+Okv/GHoae8Bg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjn8NmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo63xAAnFXmM98RDb0+v9s5sjV6Dxez6HEOr9vURYm0fVoq4YH/NLTX\r\nM2jxWuTvuec28vNlEP9z958H1lTfFxzQTl/Fys4+28pdNvclAwo09Fo1MexJ\r\nkqDeRCV0qGQpWYc0CU8e415jCS86TqNzmZs/RrLRR2HzTt9peKPbompeiua2\r\ntFxeNXOOSqzB3u9idgbfam050+YqSgTBPjT8GpX8ix6Ge2SCuYkpDOEhBquu\r\nL8HKV1SCJH23JFWM9ZLxmTecvH4qPbziHWSP7f18TGr+y5KBvJ6zfj5PO/AC\r\nrA1JbO2dUc6A3Lf9x17j4KHk1sWEUm/xZQRF+B3d/uk6/Ui2tkg8Ez18EPJ8\r\nfSknIfODCKiCjUprlFtaCOvqvCndVofep9x2/m1zda4muMEFAb1ipue2N9jC\r\nL13toTM4lN3lw4wkdkJfO3CFJX/FOndxsrfcwARyLe8d4rjegetR9z2/bkGi\r\nPBcAVIbQYO8lY2mlUwPZxu7L05e+tdpy/ckFNFIqSCKThd8iBRQ5APSVYoow\r\ngnpcKEdBJhjq1WJTBk48f4nSwP17IJ/xUNkQ5gO4zGqZdIWh72lHB/X8CuEB\r\nvZesVgz3CAw6tTHdJua726aBD9KFhb0+KY6cCUV4aA+Tj54kFu08BoaGuDat\r\n0vIiTMtGKmpl8md1tP3EDgGccdHB35xbSRU=\r\n=9p+j\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"billen","email":"kbillen92@gmail.com"},"directories":{},"maintainers":[{"name":"billen","email":"kbillen92@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-waveform_0.0.3_1671414630436_0.5309015923984821"},"_hasShrinkwrap":false},"0.0.4":{"name":"@billen/ng-waveform","version":"0.0.4","author":{"name":"Kulwinder Billen","email":"kbillen92@gmail.com"},"license":"MIT","dependencies":{"tslib":"^2.0.0"},"repository":{"type":"git","url":"git+https://github.com/billen/ng-waveform.git"},"module":"fesm2015/billen-ng-waveform.mjs","es2020":"fesm2020/billen-ng-waveform.mjs","esm2020":"esm2020/billen-ng-waveform.mjs","fesm2020":"fesm2020/billen-ng-waveform.mjs","fesm2015":"fesm2015/billen-ng-waveform.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/billen-ng-waveform.mjs","es2020":"./fesm2020/billen-ng-waveform.mjs","es2015":"./fesm2015/billen-ng-waveform.mjs","node":"./fesm2015/billen-ng-waveform.mjs","default":"./fesm2020/billen-ng-waveform.mjs"}},"sideEffects":false,"gitHead":"218d26d55dd3335614998447346f2921f866b67e","description":"Library to visualize audio waveform. Built as pure Angular library that doesn't wrap any of JS library. With NgWaveform you can create interactive customisable waveform of any audio file in your Angular application.","bugs":{"url":"https://github.com/billen/ng-waveform/issues"},"homepage":"https://github.com/billen/ng-waveform#readme","_id":"@billen/ng-waveform@0.0.4","_nodeVersion":"16.15.1","_npmVersion":"8.15.1","dist":{"integrity":"sha512-X8yoEU7tVhMYxXrB9fSEcKAI40H8KwUzOZhIdeCy916DmJT2LIqQh+0QyRrNl0jcrzX7gezaAKI6VCkKGpsTEw==","shasum":"d95bbee5906168ff299901ddcfc9114ae8d22b5c","tarball":"https://registry.npmjs.org/@billen/ng-waveform/-/ng-waveform-0.0.4.tgz","fileCount":20,"unpackedSize":265845,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwbPM5GKwdd1fr4FFkPbD9q86gscL20em2ASl5chPFswIhAJs2Wo79GkV4/6AenWWffyT68zKCd8QOe9GUsOZrtxVp"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjn8UTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXIg//cQ+5di7alonXd+1xHcKDfib/5+GHDzfp6Xd37b55MI6NqZhr\r\njRd5B4K1lrYsN3f+8H7K9l3DpmGDF5TbvFQXxIQ3+4u+iSt2yBLHXQRCudFG\r\nScG2LHONTJGIETVtr77AdEtk5aHNAG+u2PJtJeWKozWeWnRpjGykCGAXHN51\r\n8YIijs5sLEvp0Jtb3cVdUMBCmMo/kZ5EfP6Lh2HX+qWn3RkpZqdjbHkY/czv\r\njDRGUbpkGA7doWNUxTAdiKqPIUSjd73ewwII4zIy3dNHLbywW5KX11fbGNJu\r\nHLNUuTTVkgRlbN88Fet1dVMOwo8OqDzPkY6HPz6xP5zFRp77Dqy6eI/yTYR+\r\nAUJMg+ZAgQMoCOlZ3i/M7mIKaUCSzB+gLIAON8WLYmPsF4aNS3uBTruwXHd6\r\n2YoqvBVxhRoREADqmos8JMrp28gWaUZkT30Q9uqZUe5xiY/0/bfTP+w7Xbsz\r\na2d5bX/8XFnqUQGiv0lYfm5gCwBiTA+QTuA9GBNwW7aJk43d2BZd4MAabRGS\r\nvODYmleqqgmw8jdDOPo8Dh0bP6Ag67oaeJaLMnfEi3PipK7IIRNnZO7ySHY0\r\nHzyNej1e/i5U+3cvoqQjefVgd4fghxwSEYS3sRhLSetwz8Jrce6aYPUhymco\r\n7LXtmOT+2/uahLKPkdCzd3MPN4Js3d/6PZQ=\r\n=+7EC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"billen","email":"kbillen92@gmail.com"},"directories":{},"maintainers":[{"name":"billen","email":"kbillen92@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-waveform_0.0.4_1671415059238_0.9698671117414759"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-19T00:36:23.204Z","0.0.1":"2022-12-19T00:36:23.481Z","modified":"2022-12-19T01:57:39.469Z","0.0.2":"2022-12-19T01:23:05.865Z","0.0.3":"2022-12-19T01:50:30.617Z","0.0.4":"2022-12-19T01:57:39.364Z"},"maintainers":[{"name":"billen","email":"kbillen92@gmail.com"}],"description":"Library to visualize audio waveform. Built as pure Angular library that doesn't wrap any of JS library. With NgWaveform you can create interactive customisable waveform of any audio file in your Angular application.","homepage":"https://github.com/billen/ng-waveform#readme","repository":{"type":"git","url":"git+https://github.com/billen/ng-waveform.git"},"author":{"name":"Kulwinder Billen","email":"kbillen92@gmail.com"},"bugs":{"url":"https://github.com/billen/ng-waveform/issues"},"license":"MIT","readme":"# NgWaveform\r\n\r\nLibrary to visualize audio waveform. Built as pure Angular library that doesn't wrap any of JS library. With NgWaveform you can create interactive customisable waveform of any audio file in your Angular application.\r\n\r\n## Quick start\r\n```bash\r\nnpm install --save ng-waveform\r\n```\r\n\r\n```typescript\r\nimport { NgWaveformModule } from 'ng-waveform';\r\n```\r\n\r\n```typescript\r\nimport { ITimeUpdateEvent, NgWaveformComponent, IRegionPositions } from 'ng-waveform';\r\n\r\n@ViewChild('waveform', { static: false }) waveform: NgWaveformComponent;\r\n\r\nonPlayButtonClick() {\r\n this.waveform.play();\r\n}\r\nonPauseButtonClick() {\r\n this.waveform.pause();\r\n}\r\n```\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n## API Reference\r\n`NgWaveformComponent`\r\n\r\n\r\n### Methods\r\n* `play(start: number = 0): void`\r\nPlay audio, start - starting position\r\n\r\n* `pause(): void`\r\nStops audio\r\n\r\n### Events\r\n* `trackLoaded` - emits when data fetched from Url, returns time in ms spent for fetching.\r\n* `rendered` - emits when waveform is rendered, returns time in ms spent for rendering.\r\n* `durationChange` - emits when duration of audio is changed, returns duration value in seconds.\r\n* `timeUpdate` - emits when current time of audio changes, returns object that implements interface `ITimeUpdateEvent`.\r\n* `paused` - emits when audio paused. Useful for switch Play/Pause buttons in external control.\r\n* `regionChange` - emits when region start or/and end positions change, returns object that implements interface `IRegionPositions`.\r\n\r\n\r\n### Properties\r\nName | Description\r\n-------------|------------\r\n`src: string` | Url of src mp3 file\r\n`height = 100` | Height of component\r\n`waveColor = '#d3d3d3'` | Color of wave\r\n`backgroundColor = 'transparent'` | Background color of component\r\n`overlayBackgroundColor = 'rgba(0, 0, 0, 0.5)'` | Background color of overlay filling component while playing\r\n`useRegion: boolean` | Turn region on\r\n`withRegionLabels: boolean` | Turn region labels on\r\n`regionBackgroundColor = 'transparent'` | Background color of region\r\n`regionStartStickColor = 'red'` | Color of region left border stick\r\n`regionEndStickColor = 'red'` | Color of region right border stick\r\n`regionTextColor = '#000'` | Color of region labels text\r\n`autoplay` | Turn autoplay on load on\r\n\r\n\r\n### Intrfaces\r\n```typescript\r\ninterface ITimeUpdateEvent {\r\n time: number;\r\n progress: number;\r\n}\r\n```\r\n\r\n```typescript\r\ninterface IRegionPositions {\r\n start: number;\r\n end: number;\r\n}\r\n```\r\n\r\n### Credits\r\nThank you very much for great inspiration [wavesurfer.js](https://wavesurfer-js.org/) team.\r\n\r\n### Conclusion\r\nFeedback, issues and stars will be very appreciated.\r\n","readmeFilename":"README.md"}