新消息提醒声音

在许多场景下，我们需要在有新的消息接受时需要进行提示声音的播放，下面我们就具体讲解在 vue 中如何进行新消息提醒声音的播放

首先我们导入我们的声音 map

const notifySoundMap = {default: require('../../static/audio/default.mp3'),apple: require('../../static/audio/apple.mp3'),pcqq: require('../../static/audio/pcqq.mp3'),momo: require('../../static/audio/momo.mp3'),huaji: require('../../static/audio/huaji.mp3'),mobileqq: require('../../static/audio/mobileqq.mp3'),none: ''
}

播放声音的组件

<audio :src="NotifyAudio" ref="audio" muted></audio>

然后在 data 中设置声音属性

  data () {return {NotifyAudio: '', // 播放的声音notifySound: '' // 目前设置的声音}},created () {// 页面创建我们将用户设置的提示音进行加载this.notifySound = this.userInfo.notifySoundthis.getMyConversationsList()},sockets: {...// 每当收到消息时就播放声音receiveMessage (news) {this.$refs['audio'].play()// 不是现在所处的房间就新增未读消息if (news.roomId !== this.$store.state.conversation.currentConversation.roomId || JSON.stringify(this.$store.state.conversation.currentConversation) === '{}') {this.$store.dispatch('conversation/SET_UNREAD_NUM', {type: 'add', data: news})}},receiveValidateMessage (news) { // 同时向系统消息页面发送未读消息this.$refs['audio'].play()},receiveAgreeFriendValidate (data) {this.$refs['audio'].play()}},

而在声音值有变动时我们就改变当前播放声音值的设置

immediate: true|false 监听器是否立即执行，默认为false

immediate 为 false 时 watch 会等待所监听的数据改变，当数据改变时才会触发 handler。而为 true 时页面一加载 handler 便会立即执行

deep: true|false 深度监听

当需要监听一个对象的改变时，普通的 watch 方法无法监听到对象内部属性的改变，只有 data 中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

  watch: {...notifySound: {handler (notifySound) {this.NotifyAudio = notifySoundMap[notifySound]},deep: true,immediate: true}},

其相关的所有代码

<template><div class="chat"><el-container style="height: inherit;"><audio :src="NotifyAudio" ref="audio" muted></audio><el-aside width="60px" style="height: inherit;background-color:#2f2e2e"><my-menu /></el-aside><el-container><el-aside width="350px" style="height: inherit;border-right: 1px solid #c8c8c8;"><router-view></router-view></el-aside><el-container><el-header><div class="conversationName"><span style="font-size:24px">{{ currentConversation.name }}</span></div></el-header><el-main><my-mainv-if="currentConversation.id":currentConversation="currentConversation" /><div class="no-conversation hor-ver-center" v-else><p class="text">聊天~打开心灵的窗户</p><chat-svg width="800" height="648"/></div></el-main></el-container></el-container></el-container></div>
</template><script>
import myMenu from '@/views/layout/MyMenu'
import myMain from '@/views/layout/myMain'
import chatSvg from '@/SVGComponents/chat'
import conversationApi from '@/api/modules/conversation'
const notifySoundMap = {default: require('../../static/audio/default.mp3'),apple: require('../../static/audio/apple.mp3'),pcqq: require('../../static/audio/pcqq.mp3'),momo: require('../../static/audio/momo.mp3'),huaji: require('../../static/audio/huaji.mp3'),mobileqq: require('../../static/audio/mobileqq.mp3'),none: ''
}
export default {name: 'Chat',components: { myMain, myMenu, chatSvg },data () {return {NotifyAudio: '', // 播放的声音notifySound: '' // 目前设置的声音}},created () {this.notifySound = this.userInfo.notifySoundthis.getMyConversationsList()},sockets: {// 客户端connect事件，服务端可针对connect进行信息传输connect: function () {this.$message.info('连接成功')console.log('socket connected：', this.$socket.id)},onlineUser (data) {// console.log('当前在线用户列表：', data)this.$store.dispatch('user/SET_ONLINE_USER', data)},receiveMessage (news) {this.$refs['audio'].play()// 不是现在所处的房间就新增未读消息if (news.roomId !== this.$store.state.conversation.currentConversation.roomId || JSON.stringify(this.$store.state.conversation.currentConversation) === '{}') {this.$store.dispatch('conversation/SET_UNREAD_NUM', {type: 'add', data: news})}},receiveValidateMessage (news) { // 同时向系统消息页面发送未读消息this.$refs['audio'].play()},receiveAgreeFriendValidate (data) {this.$refs['audio'].play()}},computed: {currentConversation () {return this.$store.state.conversation.currentConversation},userInfo () {return this.$store.state.user.userInfo}},watch: {userInfo: {handler (newVal, oldVal) {this.userGoOnline()},deep: true,immediate: true},notifySound: {handler (notifySound) {this.NotifyAudio = notifySoundMap[notifySound]},deep: true,immediate: true}},methods: {// 用户上线userGoOnline () {if (this.userInfo) { // 有用户信息时才发送给后端进行保存this.$socket.emit('goOnline', this.userInfo)}},// 将会话信息存入vuexgetMyConversationsList () {conversationApi.getMyConversationsList(this.$store.state.user.userInfo.id).then(res => {this.$store.dispatch('conversation/SET_RECENT_CONVERSATION', {type: 'init', data: res.data.myConversationsList})})}}
}
</script>
<style>
.chat {height: inherit;background: transparent;
}
.el-footer {background-color: #f7f7f7;color: #333;text-align: center;line-height: 60px;
}
.el-aside {color: #333;text-align: center;
}
.el-main {color: #333;
}
.conversationName {display: flex;height: inherit;flex-direction: column;justify-content: space-around;align-items: center;
}
.no-conversation {text-align: center;
}
.no-conversation .text {color: #909399;font-size: 20px;
}
.hor-ver-center {position: absolute;top: 60%;left: 60%;transform: translate(-50%, -60%);
}
</style>

vue中播放消息提示音相关推荐

android 播放消息提示音和震动
1.开启震动 /*** 手机震动*/private static void phoneVibrates() {Vibrator vib = (Vibrator) MyApplication.getMy ...
vue自定义插件封装一个类似 element 中 message 消息提示框的插件
vue自定义插件封装一个类似 element 中 message 消息提示框的插件一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
android 更换软件提示音,修改微信APP新消息提示音（教程）！
熟悉我的朋友都知道,我只带来干货,每天都是实用技能!今天教大家如何自定义消息通知铃声.来电铃声.闹铃铃声,Android操作系统由于其特征,自定义这些很简单,目前很多音乐APP软件都有个" ...
android微信加人有提示音吗,Android仿微信新消息提示音
環信聊天消息提示音的實現仿微信新消息提示音設置. 思路:用RingtoneManager查詢出title,Ringtone,uri信息,title用來展示,Ringtone用來播放,uri設置提示音 ...
android接收消息后提示音,Android仿微信新消息提示音
怕有些人不知道怎么进入微信的新消息提示音功能,我这里说下操作步骤: 打开微信----我---设置---新消息提醒---新消息提示音. 经过以上的步骤就进入了这样的界面具体实现的步骤. 难点之一:获取 ...
android新消息提醒功能,Android仿微信新消息提示音
怕有些人不知道怎么进入微信的新消息提示音功能,我这里说下操作步骤: 打开微信----我---设置---新消息提醒---新消息提示音. 经过以上的步骤就进入了这样的界面具体实现的步骤. 难点之一:获取 ...
高仿微信新消息提示音功能
最近公司在做一个项目,有一个切换消息提示音的功能,可以切换本应用收到消息的提示音,而不影响系统提示音.我就按照微信的那个样式进行了编程,最终得到想要的效果. 转载请注明出处,谢谢:http://blo ...
华为触摸提示音怎么换_抖音苹果iPhone手机怎么改微信消息提示音自定义换声音教程...
[闽南网] 最近抖音上有个视频是把苹果手机的微信消息提示音修改成很可爱的声音.很多小伙伴都在问这个iPhone的微信消息提示音要怎么改,还不知道的朋友小编在下面给大家分享苹果iPhone手机更换自定义 ...
鸿蒙系统的通知栏怎么没有静音,微信7.0.0没有消息提示音怎么解决？微信通知栏不显示消息的解决...
近日,iOS和Android微信7.0.0正式版先后发布,已经有不少小伙伴升级到了最新版本.不过,这几天经常有粉丝朋友反馈,升级到微信7.0.0之后,通知栏没有消息提示音怎么回事?对于这种问题,小编以 ...
苹果手机白屏_微信可以修改消息提示音啦！还同时支持苹果/安卓
纯干货,无套路,点关注,不迷路,老司机带你飞! 每次微信的更新都会引发数亿用户的关注,并且如此庞大的用户群对微信功能上的需求也是各种各样. 比如说像:什么时候可以互删好友?啥时候能更改微信提示音?啥时 ...

vue中播放消息提示音

新消息提醒声音

vue中播放消息提示音相关推荐

最新文章

热门文章