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

之前的处理 :

　　//循环播放声音

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();
	}
}


优点:解决了上述的缺点




　　花时间记录,远大于死敲


　　
												


											
html页面的音频问题的更多相关文章
	

    
								
  1. 浏览器音频兼容和ffmpeg的音频转码使用
		
    浏览器对各音/视频格式的支持问题 浏览器测试效果图 ffmpeg在音频格式转换,和从视频中提取音频的简单实用 1.百度搜索浏览器对于音频文件的兼容,排在前面的文章大部分是复制粘贴很久以前的文章,容易误 ...
    
		
    2. 
						
  2. Android使用WebView加载H5页面播放视频音频，退出后还在播放问题解决
		
    Android中经常会使用到WebView来加载H5的页面,如果H5页面中有音频或者视频的播放时,还没播放完就退出界面,这个时候会发现音频或者视频还在后台播放,这就有点一脸懵逼了,下面是解决方案: 方 ...
    
		
    3. 
						
  3. Head First Html and CSS学习笔记之HTML
		
    初学前端开发,记录下自己的学习笔记. 第一章 认识HTML 1:关于HTML HTML是超文本标记语言(HyperText Markup Language)的缩写,用来建立网页的结构. 它只会根据标记 ...
    
		
    4. 
						
  4. unity3d教程游戏包含的一切文件导入资源
		
    http://www.58player.com/blog-2327-954.html 导入资源 将文件增加至工程文件夹的资源 (Assets) 文件夹后,Unity 将自动检测文件.将任何资源 (As ...
    
		
    5. 
						
  5. Unity3d用户手册用户指南 电影纹理(Movie Texture)
		
    http://www.58player.com/blog-2327-952.html 电影纹理(Movie Texture) 注意:这只是专业/高级功能.   桌面 电影纹理是从视频文件创建的动画纹理 ...
    
		
    6. 
						
  6. HTML/CSS题库
		
    一.    填空题 使用文本编辑器编辑完HTML后,扩展名可以是__html___或___htm__. 表格的标签是____table______,单元格的标签是____td______. 在编辑ta ...
    
		
    7. 
						
  7. [Java Web] 1、Web开发初识——一大堆历史和技术名词
		
    LZ前言 LZ最近发现网络真是个神奇的东西,以前做的好玩的只能自娱自乐(或者说顾影自怜),现在只要发一个帖子,写一个博客,很快能引来一大群小伙伴的围观(有时候还能遇见几个大牛给个战略性的指导)...L ...
    
		
    8. 
						
  8. JavaEE填空与判断
		
    Java EE软件工程师认证考试 试题库- 填空题和选择题   一.     填空题 1. HTML网页文件的标记是__html__,网页文件的主体标记是_body__,标记页面标题的标记是__tit ...
    
		
    9. 
						
  9. 常用jQuery代码02
		
    一.each函数拿到每个元素的宽度 setTimeout(function () { $(".sticker_list img").each(function () { var W ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. log4j配置文件详解（转）
			
    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...
    
			
    2. 
						
  2. NPOI：处理xls文件中的合并行
			
    /// <summary> /// NPOI根据路径获取文件转换成DataTable /// </summary> /// <param name="FileP ...
    
			
    3. 
						
  3. HTML基础教程-标题
			
    HTML 标题 在 HTML 文档中,标题很重要. HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的. <h1> 定义最大的标 ...
    
			
    4. 
						
  4. socket编程部分API
			
    以TCP协议为例,UNIX的相关API int socket(int domain , int type , int protocol); 根据指定的地址族,数据类型,协议来分配一个socket的描述 ...
    
			
    5. 
						
  5. 自定义结构化config文件
			
    前言 开发过程中我们会经常使用到各种config文件,经常我们会使用appSettings进行设置所用的配置,但是随着配置量的增多,都放在appSettings里面明显是不合适的,一方面配置容易混乱, ...
    
			
    6. 
						
  6. ArcGIS API for JavaScript 4.2学习笔记[6] goTo()地图动画
			
    这是个很有意思的例子,不过例子给的比较复杂,需要查很多API,我会在文章最后给出关键的类和属性解释. 同样发现一个很有意思的事儿:博客园似乎有爬虫,我4号发布的blogs,5号就在百度和google搜 ...
    
			
    7. 
						
  7. ArcGIS 网络分析[8.6] 资料6 创建网络分析图层及进行路径分析
			
    基于上篇所介绍的内容,就说说如何利用访问到的网络数据集,在Map中添加网络数据集图层.创建网络分析图层中的路径图层,并执行路径分析示例.
    
			
    8. 
						
  8. Java 多线程笔记
			
    资料来源于网络,仅供参考学习.   1.A Java program ends when all its threads finish (more specifically, when all its ...
    
			
    9. 
						
  9. 初学ssm框架的信息
			
    ssm框架,就是Spring ,SpringMVC ,mybstis 的简称,我们是从mybstis 开始学起的,mybatis的作用作为一个连接数据库的框架,可以很好配置连接好数据库, 有mybat ...
    
			
    10. 
						
  10. Io 异常: The Network Adapter could not establish the connection
			
    新接触一个项目,导入源码,在本地启动的时候后台报了一个错误: Could not discover the dialect to use. java.sql.SQLException: Io 异常:  ...
    
			
    11.