解决AudioCont...HTMLMediaElement already connected previously to a different MediaElementSourceNode.问题

很久没有写过东西了，最近在帮朋友搞一个音乐方面的站点，因为涉及到H5播放音乐，所以考虑增加音频视觉效果更棒些，可是在使用canvas+AudioContext创建音乐播放可视化效果的时候，发现只要audio音频暂停后再次点击播放，浏览器就会报下面的错误：

Uncaught DOMException: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.at analyzerInitialize (https://.../app.js?ver=1.6:40:25)at HTMLDivElement.<anonymous> (https://.../app.js?ver=1.6:79:3)at HTMLDivElement.dispatch (https://.../jquery.min.js?ver=1.6.87.30:3:12444)at r.handle (https://.../jquery.min.js?ver=1.6.87.30:3:9173)at C (https://...min.js?ver=1.6.87.30:6:6769)at HTMLDocument.T (https://...min.js?ver=1.6.87.30:6:8938)

虽然不影响手机浏览器执行（用户几乎看不到），但是作为一只程序猿怎么会允许自己写的东西飘红呢？

于是开始各种排查，通过报错信息不难发现是因为HTMLMediaElement被占用而导致的，也就是说audio相关的元素已经被使用，当暂停以后再次点击播放的时候，加载createMediaElementSource(audio)就会造成错误，因为不是科班出身，无法用专业的语言来描述，勉强举个例子，用vue等前端框架经常遇到的插槽冲突的道理是一样的。知道了问题是怎么发生的，那么解决起来就相对简单了。html代码中编写的<audio>标签是固定的，那么如果使用javascript去创建标签，对于JS来讲每次创建的就都不一样了，于是删除html里面的audio标签，在原来的位置创建了一个id=audio_container的div，然后在JS里面加上：

......
//新增下面一行，用于通过JS创建audio元素
document.getElementById('audio_container').innerHTML = '<audio id=\"audio\"></audio>';
var audio = $('#audio');audio.src = playUrl;
......var audioSrc = actx.createMediaElementSource(audio);
......

保存后清空缓存重新加载，OK，红彤彤的一片不见了！哈哈，文章写的乱七八糟，希望能给遇到同样问题的朋友们一点提示，也给自己做个备忘。

洗洗赶紧睡了～

解决AudioCont...HTMLMediaElement already connected previously to a different MediaElementSourceNode.问题相关推荐

解决adb调试显示 Connected Device ************** [null]
或者有时候直接提示[UNAUTHORIZED--] 上边的提示 Connected Device 中设备编号后边加了个[null],意思是未授权,看下设备是否提示授权,如果没看到提示,可以重新拔掉设 ...
利用OllyDbg解决JLINK提示The connected J-Link is defective. Proper opera...
备注:本方法来源于网上相关博客,仅作为学习研究之用.使用正版软件人人有责,不得非法用于软件破解. 1.打开OD,载入JLINK.exe 2.点击View->Executable Modules, ...
oracle数据库报错09275,【求助】oracle 数据库导入出错怎么解决？
导入数据库的时候日记记录如下:导入失败.是什么问题呢?求助各位帮忙解决,谢谢. Connected to: Oracle Database 10g Enterprise Edition Release ...
控制面板快捷键win10_win10的Microsoft兼容性遥测占用大量资源？这样解决
就像下面的图片那样,win10的任务管理器里Microsoft兼容性遥测占用了大量的CPU. 可以看到Microsoft兼容性遥测竟然占用了28.8%的CPU,当然内存,磁盘也有不同程度的占用. 那么 ...
connected papers 让注册，怎么办呢
白嫖 connected papers 问题描述解决办法问题描述 connected papers 之前都是免费查的,现在限制次数了,让注册,一年需要260元人民币,太贵了!所以这里给出一个白pi ...
用Arduino远程控制车库门开关
"我用一个以太网插板负载到Arduino上.如此我便实现了打开我的车库门--就是这样! 我也安装了一个磁传感器,门是开着的或者封闭的都可以让我知道.所有都通过Telnet实现. 我修改了来自 ...
10-解决win10系统更新后开机变慢的问题
前言:部分小米游戏本插上键盘后开机变慢,如果以下方法不适合,请到售后更新一下BIOS的版本,这是一个bug,官方也说了.如果不怕麻烦,每次开机之前拔掉键盘即可,也可以重新买一个正规的键盘插上试试,不过 ...
Oracle 11g RAC CRS-4535/ORA-15077
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 新安装了 ...
一步一步搭建11gR2 rac+dg之安装rac出现问题解决(六)
一步一步在RHEL6.5+VMware Workstation 10上搭建 oracle 11gR2 rac + dg 之安装rac出现的问题 (六) 本章主要是搜集了一些安装rac的过程中出现的问题 ...
Qt之网络编程错误总结
来自http://blog.csdn.net/qianguozheng/article/details/6849293 最近在做Qt网络编程,主要是项目需要,学习下Qt下网络编程的多线程实现. 1.Q ...

解决AudioCont...HTMLMediaElement already connected previously to a different MediaElementSourceNode.问题

解决AudioCont...HTMLMediaElement already connected previously to a different MediaElementSourceNode.问题相关推荐

最新文章

热门文章