移动端添加提示音和震动

 今天接到一个新需求，在移动端界面（主要用于公司的手持枪系统）添加新消息提示音和震动，话不多说，直接上代码

注意：需要保存一段音频文件

创建一个公共的js文件，在需要的页面引入该文件

// 将 audio 元素添加到页面的 body 中
const audioElement = document.createElement("audio");
audioElement.id = "myAudio";
audioElement.src = "../mp3/music.mp3";
document.body.appendChild(audioElement);

//在有新消息时调用该方法
function startMusic(){
    var audio = document.getElementById("myAudio");
    //需要连续响提示音可加该串代码
    audio.addEventListener("ended", function() {
      // 重新播放音频
      audio.play();
    });
    audio.play();
    navigator.vibrate([1500,1000,1500,1000,]);//添加震动效果，不需要可以去除
}

//停止
function stopMusic(){
  var audio = document.getElementById("myAudio");
  audio.pause();//停止提示音
  navigator.vibrate([0]);//停止震动
}

注意：基于浏览器的安全策略，在用户点击进入页面没有任何交互时，可能不会有提示音和震动效果，需要用户有具体操作，才能响铃和震动；此外，熄屏后部分设备可以继续响铃（可能设置了后台运行），这个目前没有深究，有知道的小伙伴请赐教!