项目需求

在一个项目中客户要求给后台新增一个消息提示功能，就是有音乐播放那种，然后点击提示跳到最新的消息页面。类似这种:

项目难点

1、谷歌浏览器和火狐浏览器在前几个版本已经取消了用户进入页面自动播放的功能。当然也可以自己手动打开，不过这个需要用户自己设置，不在我们考虑之列。

2、在网上众多的解决方案中，所有的方案都离不开一个操作，就是如果需要播放，就必须与页面有一个事件交互。 也就是必须点击页面才能播放音频，但是注意，这里的点击是随便点击，并非点击播放按钮。

解决方法

因为是后台系统，所以用户必须登录。这样就满足了实现该功能的先决条件————与页面的交互（点击登录） 。

其余项目如果想用到该方法，可以强制用户和你交流。比如弹框，消息提示等。

1、用户点击登录获取用户的登录id

2、在App.vue里面创建一个全局的提示

2.1 在template中创建一个audio标签。

<audio id="audio" ref="audio" src="./assets/audio/newMessage.mp3" 
controls="controls" style="z-index: 999999;display: none; margin-left: 600px" />

注意：这里必须要创建新的标签，而且层级要最高。为了防止误触，可以给他添加属性 display: none;

2.2 在methods中创建方法。

// 循环获取消息展示
getNewMsg() {
  const that = this
  getNews({
    sys_member_id: getUserId()  // 这里的id就是登录获取到的id
  }).then(res => {
    if (res == 1) {  // 接口判断返回值1为有新消息，2为没有新消息
      document.getElementById('audio').play()
      this.$notify({
        title: '提示',
        message: '当前有新的任务，请点击此处前往查看最新任务！',
        type: 'warning',
        duration: 0,
        onClick() {
          that.goTask(task_id)
        }
      })
    }
  })
},
// 消息点击事件
goTask(task_id) {
  this.$router.push({ name: 'fault-task',params:{ id:task_id } })
}

注意：这里的getnews是获取新消息的接口封装，要求传入的是用户的登录id，具体逻辑交给后端，你这里不需要处理。根据后端给的返回值来判断是否有新消息。

如果有新消息，就执行代码document.getElementById('audio').play()播放音频。

下面的notify是element组件里面的提示，也就是我最开始放的那个图片样式。这里有一个点击事件，对应的是点击方法，可以携带参数在本页面跳转对应的页面。

2.3 在mounted中创建一个定时器循环调用方法。

mounted() {
  const timer = setInterval(res => {  // 每隔五秒调用一次
    if (getUserId()) { // 这里要进行是否有id的判断，不然不管是否登录都会提示。
      this.getNewMsg()
    } else {
      if (typeof timer !== 'number') { // 判断定时器的类型
        timer.clear() // 清除定时器
      }
    }
  }, 5000)
},

vue实现后台在chorme和firefox自动播放消息提示音

项目需求

项目难点

解决方法

以上