分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

html页面的音频问题

发布时间:2023-09-06 01:28责任编辑:彭小芳关键词:暂无标签

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

之前的处理 :

  //循环播放声音

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 : 上面的dialSourcefunction 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页面的音频问题

原文地址:http://www.cnblogs.com/liyong888/p/7930719.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved