zoukankan      html  css  js  c++  java
  • 谷歌浏览器自动播放音频且可动态切换音频路径

    最近公司项目出了个新需求,根据告警事件自动播放对应告警声音(加载对应mp3文件),发现audio谷歌浏览器中无法自动播放,火狐就没有问题,查了资料,看了半天,曲线救国一下:

    具体思路如下:在指定文件夹中放置对应.mp3格式文件,然后根据文件名去动态切换audio的src,切记不要在source中切换src,你会发现根本不起作用;然后告警来临时,触发播放方法,告警消失暂停播放;

    正常播放音频:

    <audio src="../xxx.mp3" id="audio"></audio>
    <script>
    var audio = document.getElementById('audio');
    audio.play();
    </script>

    这是最简单的音频播放代码,在谷歌浏览器中会抛出异常:Uncaught (in promise) DOMException...

    有个细节需要注意下:动态切换音频的src属性,在js中改变src我发现不起作用,然后换为jq,attr获取就可正常切换;

    以下是业务代码,仅供参考;

    <!--
    * @Description:
    * @Project: 音频播放
    * @Author: fanmixue
    * @Date: 2020-06-25 01:00:27
    * @LastEditors: fanmixue
    * @LastEditTime: 2020-06-28 21:30:11
    * @Modified By: fanmixue
    * @FilePath: /audio/index.html
    -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <script src="./jquery.js"></script>
    <body>
    <audio src="./12946.mp3" muted autoplay loop id="audio" ></audio>
    </body>
    </html>
    <script>
    /*
    * muted 静音
    * autoplay 自动播放
    * loop 循环播放
    * 初始化autoplay且静音播放,到了需要播放的时候通过打开音量
    * 注意在js里切换音频src我发现不起作用,用了jq才好使,有大牛知道为什么吗
    */
    //以下注释部分是在网上找到的资料,记录下
    // var audio = document.getElementById('audio');
    // var t1 = 3e3;//如果是轮询,这个时间必须大于音频的长度。如果是webscoket,应该设置一个状态play,避免重复播放,如下:3e3表示3的3次方
    // var t2 = 2500;//音频的长度,确保能够完整的播放给用户
    // var play = false;
    // function run(){
    // if(play){
    // return false;
    // }
    // audio.currentTime = 0;//设置播放的音频的起始时间
    // audio.volume = 1;//设置音频的声音大小
    // audio.muted = false;//关闭静音状态
    // play = true;
    // setTimeout(function(){
    // play = false;
    // audio.muted = true;//播放完毕,开启静音状态
    // },t2);
    // }
    // setInterval(function(){
    // run();//假装在轮询服务器,或者从websocket拉取数据
    // },t1);
     
    //以下为自己修改后,动态切换音频路径,且在谷歌。火狐。ie8+ 实测好使
    var prevAlarmName = null,//上一次告警名称
    play = false; //状态play,避免重复播放
    function playAlarmVoice(alarmName) {
    console.log('当前播放的是',alarmName +'防区!');
    if (alarmName && alarmName != prevAlarmName) {
    //项目中mp3文件目录
    var path = "./"+alarmName+".mp3";
    $('#audio').attr('src',path);
    var music = $('#audio').get('0');
    console.log(music)
    music.oncanplay = function(){
    if(play){return false;}
    music.currentTime = 0;//音频起始时间
    music.volume = 1; //设置音频声音大小
    music.muted = false;//关闭静音状态
    play = true;
    setTimeout(function(){
    play = false;
    music.muted = true;//播放完毕,开启静音状态
    console.log(111)
    },250);
    }
    }
    prevAlarmName = alarmName;
    }
    setInterval(function() {
    playAlarmVoice('12946');
    },3000)
    //暂停播放
    function stopAlarmVoice() {
    setTimeout(function(){
    document.getElementById("audio").pause();
    console.log('暂停成功!');
    },1000)
    };
    </script>



  • 相关阅读:
    java面试题
    [gcc]: unknown (64bit) [FAIL]
    一种基于Spring的java程序常量管理思路
    if (! +"\v1")的解释
    jQuery validation plugin
    oscache缓存技术
    基于jQuery开发的javascript模板引擎jTemplates
    编写好的CSS代码的13个忠告
    对 HTTP 304 的理解
    Hibernate N+1 问题
  • 原文地址:https://www.cnblogs.com/fmixue/p/13205159.html
Copyright © 2011-2022 走看看