zoukankan      html  css  js  c++  java
  • html页面的音频问题

    导火线 : 负责了项目中的话务间模块,处理音频出了一点问题

    之前的处理 :

      //循环播放声音

    var dialAudioDocument = document.createElement('audio');  //这是拨号的声音(这里只写了一个音频)
    var dialSource = document.createElement('source');  
    dialSource.type = "audio/mpeg";
    dialSource.type = "audio/mpeg";
    dialSource.autoplay = "autoplay";
    dialSource.controls = "controls";
            

    url : 表示音频路径,flag : 一个标识,来电还是拨出,audio : 表示上面的dialAudioDocument, source : 上面的dialSource
    function playAudio(url, flag, audio, source) { console.log(url);    注 : 这个的音频要借助source才能播放,并且没有方法让他停止(原因不详) console.log(flag); console.log(audio); console.log(source); source.src = url; audio.appendChild(source); audio.play(); if (flag == "dial") { dialAlert = setTimeout("playAudio('" + url + "','dial', '"+audio+"', '"+source+"')", 1000*5); } if (flag == "call") { callAlert = setTimeout("playAudio('" + url + "','call', '"+audio+"', '"+source+"')", 1000*29); } }
    // 缺点:由于没有方法让音频停止,这时候只能选取时间短的音频进行循环播放,停止则通过clearInter..的方式停止,而后面换了音频,就不行了.....

    当时的小demo : (测试此音频方法是否管用)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>文档标题</title>
        
    </head>
    
    <body>
      <script>
        var t;
        function play2(url){
            var audio = document.createElement('audio');
            var source = document.createElement('source');   
            source.type = "audio/mpeg";
            source.type = "audio/mpeg";
            source.src = url;   
            source.autoplay = "autoplay";
            source.controls = "controls";
            audio.appendChild(source); 
            audio.play();
            t = setTimeout("play2('"+url+"')",2000);
            
        }
        function aa(){
            console.log(t);
            clearTimeout(t);
            console.log(t);
            clearTimeout(t);
        }
    
     
      </script>
     
      <input type="button" value="播放" onclick="play2('http://down.chinatcc.com/TW_Call_Disconnect.ogg')" />
      <input type="button" value="停止" onclick="aa();" />
    </body>
    	
    </html>
    

      

      

    目前的方案:

      

    
    

    <!-- 下面是存放录音 -->
    <audio id="dialAudio" src="/static/audio/dialAudio.mp3"></audio>
    <audio id="callAudio" src="/static/audio/callAudio.mp3"></audio>
    <audio id="hangAudio" src="/static/audio/hangAudio.mp3"></audio>

    
    

    $(function () {
    //初始化录音标签
    dialAudioDocument = document.getElementById('dialAudio');  //这里只能有document得到,原因不详,猜想可能是加载顺序问题
    callAudioDocument = document.getElementById('callAudio');
    hangAudioDocument = document.getElementById('hangAudio');


    //
    循环播放声音 function playAudio(document, flag) { console.log(document); document.currentTime = 0; document.play(); if (flag == "dial") { dialAlert = setTimeout("playAudio('" + document + "','dial')", 1000*5); } if (flag == "call") { callAlert = setTimeout("playAudio('" + document + "','call')", 1000*29); } }

    //停止掉声音
    function pauseAudio(document, flag){
    if (flag == "dial") {
    document.pause();
    }
    if (flag == "call") {
    document.pause();
    }
    }

    优点:解决了上述的缺点

      花时间记录,远大于死敲

      

  • 相关阅读:
    【软件构造】第二章第一节 软件生命周期和版本控制(配置管理)
    【软件构造】第三章第三节 抽象数据型(ADT)
    【软件构造】第三章第二节 设计规约
    用python实现两个文本合并
    用python实现哈希表
    想要搭建项目 首选从概念理解(一)
    javascript调用rest地址,获取页面值
    ArcGIS Runtime SDK for Mac OS X使用示例
    ArcGIS Server网络分析模块问题汇总
    (ArcGIS Flex API)根据地图数据构建动态树
  • 原文地址:https://www.cnblogs.com/liyong888/p/7930719.html
Copyright © 2011-2022 走看看