vue如何抽象出一个客户端级音频模块（多页面同时控制）
鍥犱负鍠滄鐪媣tuber鍝堝搱锛屾渶杩戝姞鍏ヤ簡vtuber-music椤圭洰缁勫弬涓庡紑鍙戙€傞」鐩槸涓€涓獀ue椤圭洰锛屼絾鏄洜涓篣I璁捐寰堝亸瀹㈡埛绔紝鎵€浠ヨ璁′簡杩欎釜瀹㈡埛绔骇鐨勯煶棰戞ā鍧楋紝鍙互鍚屾椂鎺у埗澶氫釜椤甸潰鎾斁锛屾殏鍋滐紝鍒囨崲姝屾洸锛屾敼鍙橀煶閲忥紝鎾斁浣嶇疆绛?椤圭洰鍏憡鏉匡細https://blog.vtbmusic.love椤圭洰蹇収锛歨ttp://vtbmusic.com椤圭洰寮€婧愬湴鍧€锛歨ttps://github.com/vtbmusic/VtuberMusic锛坉ev鍒嗘敮鏄渶鏂扮殑寮€鍙戣繘搴︼紝others鏄鐏惧簲鎬ュ浠藉拰鐗堟湰绠＄悊锛夐€昏緫鍘熺悊鍏堜粙缁嶄竴涓嬮€昏緫鍘熺悊锛岀敱浜庨渶瑕佸彲浠ユ敮鎸佸涓〉闈㈠悓鏃舵帶鍒讹紙鍏朵粬椤甸潰涔熸湁鎾斁鏆傚仠锛屾瓕鏇插垏鎹紝姝屾洸鍒楄〃绛夐渶姹傦級鏇夸唬鍝侊級銆傛闊抽妯″潡琚璁′负鍗曚緥闊抽瀹炰緥銆傛垜鐨勯€昏緫鎬濊矾鏄細璁捐涓€涓笓娉ㄤ簬audio鏍囩鐨勭粍浠跺姞杞藉埌app.vue涓紝闅忕潃椤圭洰鐨勫惎鍔ㄨ€屽敜閱掋€傛暟鎹緷璧杤uex绛夌洃鎺х姸鎬佺鐞嗗伐鍏凤紙鐩墠鐢ㄧ殑鏄痸uex锛夛紝鎶借薄鍑轰竴涓崟鐙殑js鏂囦欢鏉ユ帶鍒秜uex锛堝叾瀹瀟s鏇磋鑼冿紝鎴戣繖閲屽畬鍏ㄦ噿寰楃敤js浜嗮煒傦級锛岀劧鍚庢妸this鏂囦欢琚敞鍐屽埌vue鍏ㄥ眬锛岃繖鏍峰湪鏁翠釜椤圭洰鐨勪换浣曞湴鏂归兘鍙互寰堟柟渚跨殑鎺у埗杩欎釜闊抽鐨勭姸鎬侊紝渚嬪锛歵his.$audioSet.Play()_//鍦ㄤ换鎰忎竴娈典唬鐮佷腑浣跨敤this鍦ㄤ换鎰忛〉闈笂鍛戒护鍙互鎺у埗闊抽妯″潡鎾斁_鍏崇郴鍥惧疄鐜版柟娉曚竴寮€濮嬶紝鍦ˋpp.vue涓嬪紩鍏ヤ竴涓獀ue缁勪欢锛屽彧闇€瑕佹斁涓€涓猘udio鏍囩鍗冲彲銆侫pp.vue鐨勪唬鐮侊細
浠庘€渧uex鈥濆鍏mapState}锛沞xportdefault{name:'AudioModel',computed:{...mapState({//vuex涓湁涓€涓挱鏀炬殏鍋滅姸鎬侊紝鍚嶅瓧鍙玴auseStatuspauseStatus:state=>state.song.pauseStatus,})},watch:{pauseStatus(state){//妫€娴嬪埌鎾斁鏆傚仠鐘舵€佹敼鍙榯his.handlePlay(state)},},methods:{/**鎾斁鏆傚仠鎺у埗*/handlePlay锛堢姸鎬侊級{锛佺姸鎬侊紵this.audioPlayFade():this.audioPauseFade();},/**褰撻煶棰戞爣绛炬洿鏂拌繘搴︽椂闂磋Е鍙戞椂锛岀粦瀹氭暟鎹埌璇ョ粍浠?/onUpdateTime(e){//杩欓噷锛屽皢杩涘害淇℃伅鎻愪氦鍒皏uexconsole.log(e.target)},}}/script>浣犲彲鑳芥敞鎰忓埌鎴戝湪vuex涓娇鐢ㄤ簡pauseStatus鍙傛暟锛岀敱浜庢垜鍙槸浠ユ挱鏀炬殏鍋滃姛鑳戒负渚嬶紝瀹為檯涓婃墍鏈夐渶瑕佹弧瓒崇殑鍔熻兘娑夊強鍒扮殑鍙傛暟寰堝銆傛垜鍙创浜嗘秹鍙婃挱鏀炬殏鍋滅殑閮ㄥ垎銆備笅闈㈡槸store閮ㄥ垎鐨勪唬鐮侊細exportdefault{state:{/**鎾斁鏁翠釜閮ㄥ垎*/pauseStatus:true,//褰撳墠鎾斁鏄惁涓烘殏鍋滅姸鎬侊紝true涓烘殏鍋渳,getters:{getPause:state=>{//鏆傚仠鐘舵€乺eturnstate.pauseStatus},},mutations:{setPause(state){//璁剧疆鏆傚仠鐘舵€乻tate.pauseStatus=true}}}鑷虫锛屾墍鏈夌殑鐘舵€佺鐞嗗伐浣滃凡缁忓畬鎴愶紝浣嗘槸鎬庝箞鎺у埗闊抽鎾斁鍛紝鎴戝崟鐙啓浜嗕竴涓猘udio.js鏂囦欢鍏ㄥ眬娉ㄥ唽锛堣寰楀湪main.js閲屾敞鍐岋紝涓嬮潰灏变笉鍗曠嫭璐翠簡锛夛紝涓嬮潰鏄痑udio.js鏂囦欢鐨勯儴鍒嗕唬鐮侊細浠庘€渧ue鈥濆鍏ue浠庡鍏ュ晢搴?./../store'/***鎾斁鎺у埗妯″潡**/constPlay=()=>store.commit('setPlay')constPause=()=>store.commit('setPause')/**璋冪敤鏂规硶-*[渚嬪瓙]this.$audioSet.Play()*/exportdefaultfunction(Vue){//璁板緱娉ㄥ唽鍒癿ain.js涓殑鍏ㄥ眬Vue.prototype.$audioSet={Play,//PlayPause,//Pause}}褰撲綘瀹屾垚浠ヤ笂鎿嶄綔鍚庯紝浣犲氨鍙互鍦ㄨ繖涓」鐩殑浠讳綍鍦版柟浣跨敤this.$audioSet.Play()鏉ユ帶鍒舵挱鏀惧櫒妯″潡浜嗐€備笂闈㈢殑鎿嶄綔鎴戞垚鍔熸娊璞″嚭浜唙iewbinding闊抽妯″潡鐨勯€昏緫閮ㄥ垎锛屼絾鏄笂鍥句腑鎬庝箞鍜宲ageview缁戝畾锛屾€庝箞楂樻晥鐨勪娇鐢ㄨ繖涓粦瀹氾紝澶у鍙兘宸茬粡娉ㄦ剰鍒颁簡view閮ㄥ垎鍜宩s鏂囧墠鎵嬬粯鍏崇郴鍥句腑鐨勯儴鍒嗘病鏈夌敾鍦ㄤ竴璧枫€傚苟涓旀湁鎰忓垎寮€锛屽叾瀹炴槸鏈夊埄浜庢爣鍑嗗寲鏍煎紡鑰屼笉鏄妧鏈毦搴︼紝杈惧埌涓や釜鐩殑[1]灏嗚鍥惧眰涓庨€昏緫灞傝В鑰︼紝鍗充娇鍦ㄧ綉缁滅幆澧冧笉浣虫垨鏈煡bug鐨勬儏鍐典笅锛岃鍥剧洿鎺ュ弽棣堝綋鍓嶉煶棰戠殑鐘舵€佷俊鎭紝涓嶄細涓庣敤鎴峰鎿嶄綔鐨勪富瑙傛劅鍙楃浉鍐茬獊锛堟瘮濡傞伩鍏嶅洜缃戠粶鐜涓嶄匠瀵艰嚧鐨勬殏鍋滃拰鎾斁锛屽彲鑳藉洜鏇存柊涓嶅強鏃惰€屼笌瀹為檯鏄剧ず鐨勬寜閿姸鎬佷笉涓€鑷寸殑鐩稿弽bug锛塠2]灏嗚鍥惧眰涓庨€昏緫灞傝В鑰︼紝澶уぇ鏂逛究浜嗗悗缁〉闈㈢殑鍔熻兘鎵╁睍锛堝洜涓洪€昏緫灞傚拰瑙嗗浘灞傛病鏈夌洿鎺ュ叧绯伙紝鎵€浠ュ啓閫昏緫浠ｇ爜case鏃朵笉闇€瑕佽€冭檻瑙嗗浘灞傜殑鐘舵€?鎻愰珮浠ｇ爜鍙鎬у苟涓斿湪鍚庣画寮€鍙戜腑锛屽嵆浣挎湁鏂扮殑闇€姹傦紝涔熶笉闇€瑕佸鐞嗛〉闈㈢殑浜や簰锛屽紑鍙戦€昏緫鍗冲彲锛夎繖閲屾垜涔熺户缁互鎾斁鏆傚仠鎸夐挳涓轰緥锛屽涓嬮儴鍒嗚鍥惧眰浠ｇ爜锛?template>
