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

之前的处理 :

  //循环播放声音

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. Android使用WebView加载H5页面播放视频音频,退出后还在播放问题解决

    Android中经常会使用到WebView来加载H5的页面,如果H5页面中有音频或者视频的播放时,还没播放完就退出界面,这个时候会发现音频或者视频还在后台播放,这就有点一脸懵逼了,下面是解决方案: 方 ...

  3. Head First Html and CSS学习笔记之HTML

    初学前端开发,记录下自己的学习笔记. 第一章 认识HTML 1:关于HTML HTML是超文本标记语言(HyperText Markup Language)的缩写,用来建立网页的结构. 它只会根据标记 ...

  4. unity3d教程游戏包含的一切文件导入资源

    http://www.58player.com/blog-2327-954.html 导入资源 将文件增加至工程文件夹的资源 (Assets) 文件夹后,Unity 将自动检测文件.将任何资源 (As ...

  5. Unity3d用户手册用户指南 电影纹理(Movie Texture)

    http://www.58player.com/blog-2327-952.html 电影纹理(Movie Texture) 注意:这只是专业/高级功能.   桌面 电影纹理是从视频文件创建的动画纹理 ...

  6. HTML/CSS题库

    一.    填空题 使用文本编辑器编辑完HTML后,扩展名可以是__html___或___htm__. 表格的标签是____table______,单元格的标签是____td______. 在编辑ta ...

  7. [Java Web] 1、Web开发初识——一大堆历史和技术名词

    LZ前言 LZ最近发现网络真是个神奇的东西,以前做的好玩的只能自娱自乐(或者说顾影自怜),现在只要发一个帖子,写一个博客,很快能引来一大群小伙伴的围观(有时候还能遇见几个大牛给个战略性的指导)...L ...

  8. JavaEE填空与判断

    Java EE软件工程师认证考试 试题库- 填空题和选择题   一.     填空题 1. HTML网页文件的标记是__html__,网页文件的主体标记是_body__,标记页面标题的标记是__tit ...

  9. 常用jQuery代码02

    一.each函数拿到每个元素的宽度 setTimeout(function () { $(".sticker_list img").each(function () { var W ...

随机推荐

  1. 超详细 值得收藏 linux CentOS 7 配置Apache服务【转发+新增】

    一.Apache简介 Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源代码的网页服务器软件,可以在大多数电脑操作系统中运行,由于其跨平台和安全性(尽管不断有 ...

  2. 自学WPF之Binding(一)

    Binding的重要性就不作介绍了,是作为数据交互的支撑,下面来介绍一下为Binding指定源(Source)的几种方法: 把普通CLR类型的单个对象指定为Source:包括.NET Framewor ...

  3. 肖秀荣8套卷2018pdf下载|2018肖秀荣冲刺8套卷pdf下载电子版

    肖秀荣8套卷2018pdf下载|2018肖秀荣冲刺8套卷pdf下载电子版 下载链接: https://u253469.ctfile.com/fs/253469-229815828

  4. 小白的Python之路 day4 装饰器前奏

    装饰器前奏: 一.定义: 1.装饰器本质是函数,语法都是用def去定义的 (函数的目的:他需要完成特定的功能) 2.装饰器的功能:就是装饰其他函数(就是为其他函数添加附加功能) 二.原则: 1. 不能 ...

  5. xCode8以及iOS10 的新特性

    其他:ios10中 适配问题(1.系统判断方法失效:2.隐私数据的访问问题:3.UIColor 问题4.真彩色的显示5.ATS问题6.UIStatusBar问题7.UITextField8.UserN ...

  6. qml demo分析(externaldraganddrop-拖拽)

    一.效果展示 客户端程序拖拽是一个很常见的需求,对于QWidget程序来说,需要重写如图1这么几个方法,通过重写这几个方法的逻辑,我们就可以控制鼠标拖拽的逻辑,糟糕的是QDrag执行exec后是一个阻 ...

  7. H5+混合移动app应用开发——开篇

    前言 经过2个多月的艰苦奋斗,app的第一个版本已经快完工了,期间遇到了太多的坑,作为一个喜欢分享的人,我当然不会吝啬分享这爬坑历程.不要问我有多坑,我会告诉你很多,很多..... 过去一直从事.ne ...

  8. Lucene分词停用词库stopwords

    ! " $ % & ' ( ) * + , - -- . .. ... ...... ................... ./ .一 .数 .日 / // 0 1 2 3 4 5 ...

  9. VS访问不到TFS、VS连接TFS报TF30063

    =============================================== 20170704_第一次修改                       ccb_warlock === ...

  10. localStorage用法总结

    这些知识是参考下面的朋友的.谢谢分享. http://www.jianshu.com/p/39ba41ead42e http://www.cnblogs.com/st-leslie/p/5617130 ...