HTML代码
为了能在vuex里面获取到audio标签 所以标签要放在App.vue里面和router-view同级
Vuex代码
因为vuex和app.vue是同级所以这边获取dom也是可以获取到的,因为浏览器没有做交互的情况下是不能直接用js调用语音播放的,所以需要处理一下
const audio = {
state: {
//存储对象属性 value,text
audioState: false,
load:false
},
mutations: {
SET_AUDIO: (state, fields) => {
state.audioState = true;
let music = document.getElementById("musicAudio");
if (state.audioState) {
if (!state.load) {
document.addEventListener(
"touchstart",
function () {
music.play();
},
false
);
} else {
music.play()
}
} else {
audio.pause()
}
state.load = true
}
},
actions: {
// TODO 如果没找到可以尝试请求一下
setAudio({ commit }, userInfo) {
commit('SET_AUDIO')
}
}
}
页面调用
我这边第一次播放的时候没有声音,所以在App.vue里面执行了第一次事件,后续接口成功回调里面再执行就会正常响起提示音了
this.$store.dispatch('setAudio')
大佬们有更好的方法欢迎留言指点一下小弟