UNPKG

vue-sound

Version:

An audio player built with Vue.js

github.com/kimlarocca/vue-sound

kimlarocca/vue-sound

2 lines (1 loc) • 14.6 kB
1
2
(function(i,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis!="undefined"?globalThis:i||self,e(i.VueSound={},i.Vue))})(this,function(i,e){"use strict";var c=(l,t)=>{const n=l.__vccOpts||l;for(const[d,a]of t)n[d]=a;return n};const h={},m={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",height:"32",width:"32",class:"play-icon",role:"img"},_=[e.createElementVNode("title",null,"Play",-1),e.createElementVNode("path",{d:"M356.5 235.5C363.6 239.9 368 247.6 368 256C368 264.4 363.6 272.1 356.5 276.5L212.5 364.5C205.1 369 195.8 369.2 188.3 364.9C180.7 360.7 176 352.7 176 344V167.1C176 159.3 180.7 151.3 188.3 147.1C195.8 142.8 205.1 142.1 212.5 147.5L356.5 235.5zM208 182.3V329.7L328.7 255.1L208 182.3zM0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480z"},null,-1)];function u(l,t){return e.openBlock(),e.createElementBlock("svg",m,_)}var p=c(h,[["render",u]]);const k={},f={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",height:"32",width:"32",class:"pause-icon",role:"img"},y=[e.createElementVNode("title",null,"Pause",-1),e.createElementVNode("path",{d:"M208 160C199.2 160 192 167.2 192 176v160C192 344.8 199.2 352 208 352S224 344.8 224 336v-160C224 167.2 216.8 160 208 160zM304 160C295.2 160 288 167.2 288 176v160c0 8.844 7.156 16 16 16s16-7.156 16-16v-160C320 167.2 312.8 160 304 160zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480z"},null,-1)];function g(l,t){return e.openBlock(),e.createElementBlock("svg",f,y)}var w=c(k,[["render",g]]);const C={},V={height:"32",viewBox:"0 0 32 32",width:"32",xmlns:"http://www.w3.org/2000/svg",class:"back-15-icon",role:"img"},B=[e.createElementVNode("title",null,"Go Back 15 Seconds",-1),e.createElementVNode("path",{d:"m16 2c-4.418 0-8.418 1.791-11.313 4.687l-4.686-4.687v12h12l-4.485-4.485c2.172-2.172 5.172-3.515 8.485-3.515 6.627 0 12 5.373 12 12 0 3.584-1.572 6.801-4.063 9l2.646 3c3.322-2.932 5.417-7.221 5.417-12 0-8.837-7.163-16-16-16z"},null,-1)];function E(l,t){return e.openBlock(),e.createElementBlock("svg",V,B)}var S=c(C,[["render",E]]);const N={},L={height:"32",viewBox:"0 0 32 32",width:"32",xmlns:"http://www.w3.org/2000/svg",class:"ahead-15-icon",role:"img"},M=[e.createElementVNode("title",null,"Go Ahead 15 Seconds",-1),e.createElementVNode("path",{d:"m0 18c0 4.779 2.095 9.068 5.417 12l2.646-3c-2.491-2.199-4.063-5.416-4.063-9 0-6.627 5.373-12 12-12 3.314 0 6.314 1.343 8.485 3.515l-4.485 4.485h12v-12l-4.687 4.687c-2.895-2.896-6.895-4.687-11.313-4.687-8.837 0-16 7.163-16 16z"},null,-1)];function b(l,t){return e.openBlock(),e.createElementBlock("svg",L,M)}var x=c(N,[["render",b]]);const z={},T={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 576 512",height:"32",width:"32",class:"volume-icon",role:"img"},D=[e.createElementVNode("title",null,"Volume",-1),e.createElementVNode("path",{d:"M333.2 34.84c-4.201-1.895-8.727-2.841-13.16-2.841c-7.697 0-15.29 2.784-21.27 8.1L163.8 160H80c-26.51 0-48 21.49-48 47.1v95.1c0 26.51 21.49 47.1 48 47.1h83.84l134.9 119.9C304.7 477.2 312.3 480 320 480c4.438 0 8.959-.9312 13.16-2.837C344.7 472 352 460.6 352 448V64C352 51.41 344.7 39.1 333.2 34.84zM319.1 447.1L175.1 319.1H80c-8.822 0-16-7.16-16-15.96v-96c0-8.801 7.178-15.96 16-15.96h95.1l143.1-127.1c.0078-.0078-.0039 .0039 0 0L319.1 447.1zM491.4 98.7c-7.344-4.922-17.28-2.953-22.2 4.391s-2.953 17.28 4.391 22.2C517.7 154.8 544 203.7 544 256s-26.33 101.2-70.44 130.7c-7.344 4.922-9.312 14.86-4.391 22.2C472.3 413.5 477.3 416 482.5 416c3.062 0 6.156-.875 8.891-2.703C544.4 377.8 576 319 576 256S544.4 134.2 491.4 98.7zM438.4 178.7c-7.328-4.922-17.28-2.953-22.2 4.391s-2.953 17.28 4.391 22.2C437.8 216.8 448 235.7 448 256s-10.23 39.23-27.38 50.7c-7.344 4.922-9.312 14.86-4.391 22.2C419.3 333.5 424.4 336 429.5 336c3.062 0 6.156-.875 8.891-2.703C464.5 315.9 480 286.1 480 256S464.5 196.1 438.4 178.7z"},null,-1)];function P(l,t){return e.openBlock(),e.createElementBlock("svg",T,D)}var H=c(z,[["render",P]]);const A={},I={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 640 512",height:"32",width:"32",class:"volume-muted-icon",role:"img"},v=[e.createElementVNode("title",null,"Volume Muted",-1),e.createElementVNode("path",{d:"M351.1 64.05C351.1 64.04 351.1 64.05 351.1 64.05l.002 135.6L384 224.1V64c0-12.6-7.337-24.01-18.84-29.16c-4.201-1.895-8.727-2.841-13.16-2.841c-7.697 0-15.29 2.784-21.27 8.1L245.6 115.7L271.2 135.9L351.1 64.05zM480 256c0 12.91-4.529 25.05-11.97 35.3L493 311C504.8 295.2 512 276.2 512 256c0-30.97-15.53-59.86-41.56-77.3c-7.328-4.922-17.28-2.953-22.2 4.391s-2.953 17.28 4.391 22.2C469.8 216.8 480 235.7 480 256zM576 256c0 34.73-11.82 67.81-32.54 94.86l25.07 19.79C593.7 338 608 298 608 256c0-63-31.64-121.8-84.63-157.3c-7.344-4.922-17.28-2.953-22.2 4.391s-2.953 17.28 4.391 22.2C549.7 154.8 576 203.7 576 256zM351.1 447.1L207.1 319.1H112c-8.822 0-16-7.16-16-15.96v-96c0-8.801 7.178-15.96 16-15.96h23.71L98.04 162.3C78.39 168.3 64 186.4 64 208V304c0 26.51 21.49 47.1 48 47.1h83.84l134.9 119.9C336.7 477.2 344.3 480 352 480c4.438 0 8.959-.9312 13.16-2.837C376.7 472 384 460.6 384 448v-59.93l-32.02-25.28L351.1 447.1zM633.9 483.4L25.92 3.42c-6.938-5.453-17-4.25-22.48 2.641c-5.469 6.938-4.281 17 2.641 22.48l608 480C617 510.9 620.5 512 623.1 512c4.734 0 9.422-2.094 12.58-6.078C642 498.1 640.8 488.9 633.9 483.4z"},null,-1)];function $(l,t){return e.openBlock(),e.createElementBlock("svg",I,v)}var F=c(A,[["render",$]]);const K={},O={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",width:"32",height:"32",class:"download-icon",role:"img"},j=[e.createElementVNode("title",null,"Download",-1),e.createElementVNode("path",{d:"M245.4 379.1C248.4 382.7 252.2 384 256 384s7.594-1.344 10.62-4.047l144-128c6.594-5.859 7.219-15.98 1.344-22.58c-5.875-6.625-16.06-7.234-22.59-1.328L272 332.4V16C272 7.156 264.8 0 256 0S240 7.156 240 16v316.4L122.6 228C116.1 222.1 105.9 222.8 100 229.4C94.16 235.1 94.78 246.1 101.4 251.1L245.4 379.1zM448 320h-48c-8.836 0-16 7.162-16 16c0 8.836 7.164 16 16 16H448c17.67 0 32 14.33 32 32v64c0 17.67-14.33 32-32 32H64c-17.67 0-32-14.33-32-32v-64c0-17.67 14.33-32 32-32h48C120.8 352 128 344.8 128 336C128 327.2 120.8 320 112 320H64c-35.35 0-64 28.65-64 64v64c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64v-64C512 348.7 483.3 320 448 320zM440 416c0-13.25-10.75-24-24-24s-24 10.75-24 24s10.75 24 24 24S440 429.3 440 416z"},null,-1)];function G(l,t){return e.openBlock(),e.createElementBlock("svg",O,j)}var R=c(K,[["render",G]]),Ae="";const U={name:"VueSound",components:{PlayIcon:p,PauseIcon:w,Back15Icon:S,Ahead15Icon:x,VolumeIcon:H,VolumeMutedIcon:F,DownloadIcon:R},props:{autoPlay:{type:Boolean,default:!1},details:{type:String,default:null},detailsLink:{type:String,default:null},file:{type:String,default:null},image:{type:String,default:null},livestream:{type:Boolean,default:!1},loop:{type:Boolean,default:!1},showDownload:{type:Boolean,default:!1},showSkip:{type:Boolean,default:!0},showTrack:{type:Boolean,default:!0},title:{type:String,default:null},titleLink:{type:String,default:null}},data(){return{audio:void 0,currentSeconds:0,durationSeconds:0,buffered:0,innerLoop:!1,loaded:!1,playing:!1,previousVolume:35,showVolume:!1,volume:100}},computed:{hasDetails(){return this.$props.details},hasDetailsLink(){return this.$props.detailsLink},hasTitle(){return this.$props.title},hasTitleLink(){return this.$props.titleLink},muted(){return this.volume/100===0},percentBuffered(){return this.buffered/this.durationSeconds*100},percentComplete(){return this.currentSeconds/this.durationSeconds*100}},watch:{playing(l){if(l)return this.audio.play();this.audio.pause()},volume(){this.audio.volume=this.volume/100}},created(){this.innerLoop=this.loop,window.addEventListener("keydown",l=>{switch(l.code){case"Space":this.togglePlay();break;case"Enter":this.togglePlay();break;case"ArrowUp":this.volume<100&&this.volume++;break;case"ArrowDown":this.volume>0&&this.volume--;break;case"ArrowLeft":this.goBack15();break;case"ArrowRight":this.goAhead15();break}})},mounted(){this.audio=this.$refs.audioFile,this.audio.addEventListener("timeupdate",this.update),this.audio.addEventListener("loadeddata",this.load),this.audio.addEventListener("buffered",this.update),this.audio.addEventListener("pause",()=>{this.playing=!1}),this.audio.addEventListener("play",()=>{this.playing=!0})},methods:{convertTimeHHMMSS(l){const t=new Date(l*1e3).toISOString().substr(11,8);return t.indexOf("00:")===0?t.substr(3):t},download(){this.stop(),window.open(this.file,"download")},goAhead15(){this.audio.currentTime=this.audio.currentTime+15},goBack15(){this.audio.currentTime=this.audio.currentTime-15},load(){if(this.audio.readyState>=2)return this.loaded=!0,this.durationSeconds=parseInt(this.audio.duration),this.playing=this.autoPlay,this.playing;throw new Error("Failed to load sound file.")},mute(){if(this.muted)return this.volume=this.previousVolume,this.volume;this.previousVolume=this.volume,this.volume=0},seek(l){if(!this.loaded)return;const t=l.target.getBoundingClientRect(),n=(l.clientX-t.left)/t.width;this.audio.currentTime=this.audio.duration*n},stop(){this.playing=!1,this.audio.currentTime=0},togglePlay(){this.playing=!this.playing},update(){this.currentSeconds=this.audio.currentTime,this.buffered=this.audio.buffered.end(0)}}},q={class:"vue-sound"},X={key:0,class:"player-image"},J=["src","alt"],Q={class:"player"},W={class:"player-controls"},Y=["aria-label"],Z={class:"player-track"},ee={class:"player-track-title"},te=["href"],oe={key:1},ne={key:2},le={key:3,class:"player-track-title-details"},se=["href"],ae={class:"player-track-time"},ie={class:"player-track-time-current"},ce=e.createElementVNode("span",{class:"player-track-time-separator"},"/",-1),re={class:"player-track-time-total"},de=e.createElementVNode("label",{for:"playerVolume",class:"hide-ally-element"}," volume slider ",-1),he=["aria-label"],me=["loop","src"];function _e(l,t,n,d,a,o){const pe=e.resolveComponent("back15-icon"),ke=e.resolveComponent("play-icon"),fe=e.resolveComponent("pause-icon"),ye=e.resolveComponent("ahead15-icon"),ge=e.resolveComponent("volume-icon"),we=e.resolveComponent("volume-muted-icon"),Ce=e.resolveComponent("download-icon");return e.openBlock(),e.createElementBlock("div",q,[n.image?(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("img",{src:n.image,alt:n.title},null,8,J)])):e.createCommentVNode("",!0),e.createElementVNode("div",Q,[e.createElementVNode("div",W,[n.showSkip&&!n.livestream?(e.openBlock(),e.createElementBlock("a",{key:0,class:"player-back-15-icon","aria-label":"go back 15 seconds",onClick:t[0]||(t[0]=(...s)=>o.goBack15&&o.goBack15(...s))},[e.createVNode(pe)])):e.createCommentVNode("",!0),e.createElementVNode("a",{class:"player-play-pause-icon","aria-label":a.playing?"pause":"play",onClick:t[1]||(t[1]=(...s)=>o.togglePlay&&o.togglePlay(...s))},[a.playing?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(ke,{key:0})),a.playing?(e.openBlock(),e.createBlock(fe,{key:1})):e.createCommentVNode("",!0)],8,Y),n.showSkip&&!n.livestream?(e.openBlock(),e.createElementBlock("a",{key:1,class:"player-ahead-15-icon","aria-label":"go ahead 15 seconds",onClick:t[2]||(t[2]=(...s)=>o.goAhead15&&o.goAhead15(...s))},[e.createVNode(ye)])):e.createCommentVNode("",!0),e.createElementVNode("div",Z,[e.createElementVNode("div",ee,[o.hasTitle&&o.hasTitleLink?(e.openBlock(),e.createElementBlock("a",{key:0,href:n.titleLink,class:"player-track-title-link"},e.toDisplayString(n.title),9,te)):e.createCommentVNode("",!0),o.hasTitle&&!o.hasTitleLink?(e.openBlock(),e.createElementBlock("span",oe,e.toDisplayString(n.title),1)):e.createCommentVNode("",!0),o.hasTitle&&o.hasDetails?(e.openBlock(),e.createElementBlock("span",ne," - ")):e.createCommentVNode("",!0),o.hasDetails&&!o.hasDetailsLink?(e.openBlock(),e.createElementBlock("span",le,e.toDisplayString(n.details),1)):e.createCommentVNode("",!0),o.hasDetails&&o.hasDetailsLink?(e.openBlock(),e.createElementBlock("a",{key:4,href:n.detailsLink,class:"player-track-title-details-link"},e.toDisplayString(n.details),9,se)):e.createCommentVNode("",!0)]),n.livestream?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",{class:"player-track-progress",onClick:t[3]||(t[3]=e.withModifiers((...s)=>o.seek&&o.seek(...s),["prevent"]))},[e.createElementVNode("div",{style:e.normalizeStyle({width:o.percentComplete+"%"}),class:"player-track-seeker"},null,4),e.createElementVNode("div",{style:e.normalizeStyle({width:o.percentBuffered+"%"}),class:"player-track-buffered"},null,4)]),e.createElementVNode("div",ae,[e.createElementVNode("span",ie,e.toDisplayString(o.convertTimeHHMMSS(a.currentSeconds)),1),ce,e.createElementVNode("span",re,e.toDisplayString(o.convertTimeHHMMSS(a.durationSeconds)),1)])],64))]),e.createElementVNode("div",{class:"player-volume",onMouseover:t[7]||(t[7]=e.withModifiers(s=>a.showVolume=!0,["prevent"])),onMouseleave:t[8]||(t[8]=e.withModifiers(s=>a.showVolume=!1,["prevent"]))},[de,e.createVNode(e.Transition,{name:"slide-left"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("input",{id:"playerVolume","onUpdate:modelValue":t[4]||(t[4]=s=>a.volume=s),type:"range",min:"0",max:"100"},null,512),[[e.vShow,a.showVolume],[e.vModelText,a.volume]])]),_:1}),e.createElementVNode("a",{tabindex:"0",class:"player-volume-icon","aria-label":o.muted?"unmute":"mute",onClick:t[5]||(t[5]=(...s)=>o.mute&&o.mute(...s)),onKeypress:t[6]||(t[6]=e.withKeys((...s)=>o.mute&&o.mute(...s),["space","enter"]))},[o.muted?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(ge,{key:0})),o.muted?(e.openBlock(),e.createBlock(we,{key:1})):e.createCommentVNode("",!0)],40,he)],32),n.showDownload&&!n.livestream?(e.openBlock(),e.createElementBlock("a",{key:2,tabindex:"0",class:"player-download-icon","aria-label":"download",onClick:t[9]||(t[9]=(...s)=>o.download&&o.download(...s)),onKeypress:t[10]||(t[10]=e.withKeys((...s)=>o.download&&o.download(...s),["space","enter"]))},[e.createVNode(Ce)],32)):e.createCommentVNode("",!0)]),e.createElementVNode("audio",{ref:"audioFile",loop:a.innerLoop,src:n.file,preload:"auto",style:{display:"none"}},null,8,me)])])}var r=c(U,[["render",_e]]),ue={install:l=>{l.component("VueSound",r)}};i.VueSound=r,i.default=ue,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});