vue中播放消息提示音

新消息提醒声音

在许多场景下，我们需要在有新的消息接受时需要进行提示声音的播放，下面我们就具体讲解在 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.notifySound
    this.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-main
              v-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.notifySound
    this.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)
      }
    },
    // 将会话信息存入vuex
    getMyConversationsList () {
      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>