级高度沉浸感音乐可视化方法

第1章绪 音乐可视化的概 音乐可视化的价值探索与应用前 高沉浸感音乐可视化方 本文的主要工 的组织结 第2章系统架构设 系统设计目 用户需求分 功能架 系统功能需 用户操作功能结 服务器功能结 技术架 技术架构综 音频处理技术架 可视化展示系统架 第3章音频处理与WebAudio技术实 音频处理技术综 音频的物理特 音频处理技 频域音频特征提 WebAudio技术实现过 WebAudio简 WebAudioAPI音频处理过程及相关方 系统基于WebAudio音频处理实现过 第4章可视化方法实 可视化方法分 可视化方法分 方法实现分 three.js三维绘图框 可视化实现过 three.js三维场景建 可视化方法构 第5章系统具体实现与展 系统总体实现目 5.2搭 5.2.1服务器nodejs介 5.2.2搭 功能实 前端页面设 加载本地或服务器端音频文 音频处理与可视 可视化方法选择机 可视化空间适 音频音量控 问题修 第6章结 致 参考文 附录1英文原 附录2译 高度沉浸感音乐可视化方 单一的问题，通过使用HTML5WEBAUDIO频处理技术和WEBGL绘图标准，对3D关键字：音乐可视化；webgl；html5；自然音频；立体视Withthedevelopmentofscienceandtechnology,besidesthesenseofhearing,manyotherformsofexpressionhavebeenappliedtotheprocessofmusicvisualization.Intradition,musicbelongtoears,whichisanartexpressingbeautybythesenseofhearing.itisaprocessthatpeoplecreatefantasticimagesintheirmindandgaininspirationsinthedeepofheart,withthelistenofmelodyandrhythm,whentheyareenjoyingmusic.Visionandhearing,whichisthemostsignificantwayforhumanbeingstoperceivetheoutsideworld,arethemostnatural,directandimportanttoolsforhumantocognizetheworld.nowadays,asthecombinationofvisionandhearing,musicvisualizationhasgottheveryextensiveattentionandapplication.Thispaperistointroducethedetailedconceptandtheapplicationofmusicvisualization,andmakesolutionstotheproblemsoflimiteddesignfortheprocessofmusicvisualization.Itcompletesa3Dmusicvisualizationsystemthathashighimmersion,takingtheaudioprocessingtechniquesWEBAUDIOandwebgraphicsstandardWebGLinHTML5.Keyword:Musicvisualization;Webgl;HTML5;NaturalAudio；Stereoscopic1。计算机技术为，将获取的抽象数据信息转化为直观的视觉形式的过程。在商业、、教育和艺术等方面具有广阔的应用前景。音乐可视化可以为欣赏音乐艺术开通崭新的，设计师们通过构造直观视美感范畴，为欣赏音乐开通了一条崭新的。还有社会上存在一些有听觉的人对于他们来说听音乐是不可能的事。音乐可视化为音乐的提供了一个全新的演绎形式和体验途径，在可听性算机技术的飞速发展给予了音乐可视化技术优秀的具象化呈现技术。的2D3D也更为真。三维技术可以创造有很多富有创意的真的视觉效果，而且可 MP3MIDI(MusicInstrumentDigitalInterface)格式从显示理论的角度划分，有沉浸式和非沉浸式。沉浸感是在、小本文的主要工此系统采用B/S架构，基于HTML5的音频处理webaudio技术处理用户或服务器的音频，获取音频数据通过并webgl的three.js类库将获取的音频频即时音三中随机圆球跃动并根据音频频率数据进行缩支 至个人空间 等社交平的组织结第四章可视化方法实现，具体介绍了本文采用的可视化方法过程。第六章结论，针对 ，提出音乐可视化系统的综合情况和改进方向2音乐可视化的在于音乐特征的提取和创新性的展示方法，关键在于多高沉浸感音乐可视化方法实现具有沉浸感的音乐可视化系统，提供用户导用户需求分可视化界面有创意，有，能够带给用户沉浸保存可视化效果至本地或服务器，并支持至个人空间、等(2).系统功能需实时性，用户选定音频，可视化界面实时更新音频数据并展三维，3D展示体验性更好，效果更为真，沉浸感更2-1通过对用户的需求进行分析后，设计了如图1的功能架构，用户可以实现歌曲与可视化方法，从而设置适合自己的可视化方案。用户操作功能用户操作功能设计依据设计原则以及音乐可视化系统操作的现实需求，用户进入系统，进行登录与备选择保存成动画至本地或服务器功能同时支持已保存2-2服务器功能结服务器根据处理数据的相关性，分为三个功能模块，各模块分别处理网站一部分数据，并进行传输，协助完成完整功能体系。用户登录、功保存生成的加载本地音频资源或服务器音频资源至音频处理函可视化动画效果导出 资2-3技术架构。系统的扩展非常容易[5]界面采用HTML+CSS+JavaScript+jQuery进行编写，设计遵循web开发HTML5JavaScriptAPIWebAudio发。WebAudioAPIJavascript个高级应用接口这个API目的是用于让技术与传统的游戏音频引擎的综合HTML53DWebGLthree.js维可视化系统。WebGL3D去了开发网页渲染插件的麻烦可被用于创建具有复杂3D结构的页面，3D[7]WebGLWeb动画的两个问题第一它通过HTML本身实现Web交互式三维动画的制作，OpenGL[8]。WebGL实现三维可视化展示，并可以实现更具创意和的效果。服务器端应用nodejs服务器平台的express框架Node.js采用驱动、非阻塞模式的IO处理给Node.js带来在相对低系统资源耗用下的高性能与出众IONode.js很大，nodejs音频处理技术音频本身是多媒介中的一种，音频信号是一种连续变化的模拟信号，而计算机只能记录和处理数字信号，因频信号必须经过一定的变化和处理，变成二进制数据后才能送到计算机进行处理和。经过变换处理，能够提取音频WebAudioAPIHTML5JavaScriptAPI中用于处理音频的高级应用WebAudio获取音频数据。系统通过AjaxAudioContext上下文，通过createBufferSource方法将音频资源传入AudioBufferSource。同时包含在arraybuffer中的音频数据，获取Buffer分析音频数据。通过变换，将得到的音频信号变换到频域频域信息数据并输出[11]2-4WebAudioAPI可视化展示系统架WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScriptOpenGLES2.0结合在一起，可以为HTML5Canvas供硬件3D加速渲染，这样Web开基于HTML5的3D绘图标准WebGL的three.js引擎，封装了底层的图形接Three.jsthree.js设置机object重绘更新 ，实现可视化音乐变化光照物体纹理形状2-5three.js渲染器屏幕3WebAudio音频的物理特音色：一种声音区别于其他声音的个性或特征。前四个为音乐的基音频处理技频域音频特征WebAudio完成。WebAudioWebAudioAPIHTML5JavaScriptAPI，简单来说，WebAudio紧紧围绕着一个概念设计：audiocontext，它就像是一个有向图，途中的每个audionode，音频数据从源节点按照程序中指定的边一步一步的就得到了音频数据了，这个工作是由window.AudioContext来做的，我们所有对音频的操作都基于这个对象。通过AudioContext可以创建不同各类的割出来得到左右声道（ChannelSplitterNode），有的对音频数据进行频WebAudioAPI音频处理过程及相关方以及它们联系的对象，是WebAudio的。3-1audiocontext载入声音。WebAudioAPI使用AudioBuffer方法来缓冲中小型的音频（2）。接收音频文件之后，接下来要做的就是通过AudioContext的decodeAudioData()方法文件。这一方法将ArrayBuffer获取的音频文件异步（并不打断Javascript的主进程）。当decodeAudioData()结束后，此函数会调用一个回调函数返回包含未压缩的PCM格式AudioBuffer实）用start（）可以将缓冲区的音频资源传入音响设备，进行。）节的音量。使用WebAudioAPI，我们可以使用AudioGainNode（）来通过对fftsizesmoothingTimeConstant等属性的设置可以完成音频数据通过变换到频域的操作并将其频域数据。系统基于WebAudio音频处理实现当系统经过加载方法（ajax异步获取）WebAudio window.mozAudioContext||window.msAudioContext;AudioContext是WebAudioAPI的基石,创建一个全局的AudioContext对象,然后用它"线性"处理字节流.目前Chrome和Firefox对其提供了支持但需要相应 window.mozAudioContext||window.msAudioContext;接下来，需要用decodeAudioData异步地ArrayBuffer中的音频数据，AudioBufferaudioBufferSourcevarvaraudioBufferSouceNode=audioBufferSouceNode.buffer=audioBufferSouceNodeaudioContext.destination开始我们的音频了。创建获取频谱能量值的yser节点。上一步我们是将audioBufferSouce与audioContext.destination相连的，音频就直接输出到扬声器开始了，现在为了将音频在前截取，所以要把yser插在audioBufferSouceNode与audioContext.destination之间。明白了这个道理，代码也就很简单了，audioBufferSouceNode连接到yser,yser连接destination。 yser=audioContext.create 最终得到经过频谱分析的音频频率数据并传递给可视化函数进行可视化展示arrayarray=new 4可视化方法分方法实现分一个具有创新性和的可视化模型即用什么方式来可视化音乐具体来说，、这些处理方法或者多种处理方法的综合运用能够创造非常多的的视觉效果，给人以极大的视觉刺激。场景中的所有对象都是可视化的。有些对象会在整单的对象来创建复杂而又美观的场景是很的而且对象的特征也应该为用户、系统实现的可视化方法基于音频频域特征的提取，在三通过球体实时地跟随音乐的律动实现具有吸引性的音乐可视化系统。具体技术采用HTML5WebGLthree.jsthree.jsWebGLOpenGLES2.0WebHTML5CanvasDOM接口。Three.js是WebGL的一个类库，用于实现三维场景的绘制Three.jscanvas，整体的可视化空three.js设置three.js渲染器（render）。三里的物体映射到二维平面的过设置照相机（camera）。WebGL中、三中的物体投影到二的方Three.js也能够指定投影和正投影两种方式的相机。设置场（scene场景就是一个三用[Scene]类一个叫设置光（light）WebGL的三中存在点光源和聚光灯两种类型Three.js源(PointLight)](SpotLight)](DirectionLight)]，和[环境光(AmbientLight)]OpenGL照射不到的面会变得过于。设置物体即三中最终将绘制的目标[18]，音频频率的能量值于数组array中。下面我们围绕得到的频率能量值进行，varscenenewTHREE.Scene();//varcamera=newCamera(50,$(window).width()/$(window).height(),varrenderernewvarscenenewTHREE.Scene();//varcamera=newCamera(50,$(window).width()/$(window).height(),varrenderernewTHREE.WebGLRenderer();//varlight=newTHREE.AmbientLight(0x505050);//灯光vardirectionalLightnewTHREE.DirectionalLight(0xffffff0.7);//平行光directionalLight.position.set(0,1,1);不同的体验，提高和沉浸感。镜头的控制使用的是与Three.js搭配的一ObitControls.jscontrolscontrolsnewTHREE.OrbitControls(camera);//初始化控制器controls.addEventListener('change',render);//添加for(vari=0;i<7;i++)controls.pan(newTHREE.Vector3(1,0,0controls.pan(newTHREE.Vector3(0,1,0}动画部分使用requestAnimation，根据传入的音频分析器(yser)的数据可视化方法构此时从音频处理过程得到的array中了从低频0Hz到高频~Hz的所有数为了得到三维的实时性的具有的可视化过程，系统采用随机性颜色的在整个星空背景下的三中，在随机位置产生具有独特色彩的星球（圆球在空间内旋转运动当音频同时音频数据经过处理传入到可视化函数，varvari=for(varx=0;x<24;x+=2)vargeometry=newTHREE.SphereGeometry(1,36,24);varmaterial=newTHREE.MeshPhongMaterial({color:colors,ambient:0x808080,specular:0xffffff,shininess:20,reflectivity: shperes[i]=newTHREE.Mesh(geometry,material);vara=random(-10,30);varb=random(0,30);varc=random(-30,20);shperes[i].position=newTHREE.Vector3(a,b,c); 可视化动画最后将渲染器和镜头控制添加到requestAnimationFrame中进行实varvarrender=function()if(typeofarray==='object'&&array.length>0){vark=0;for(vari=0;i<shperes.length;i++)varscale=(array[k]+boost)/128;shperes[i].scale.x=(scale<1?1:scale);shperes[i].scale.yshperes[i].scale.y=(scale<1?1:scale);shperes[i].scale.z=(scale<1?1:k+=(k<array.length?1:}}4-14-25系统总体实现目webaudiowebgl3D此系统采用B/S架构，基于HTML5的音频处理webaudio技术处理用户或服务器的音频，获取音频数据通过并webgl的three.js类库将获取的音频频即时音三中随机圆球跃动并根据音频频率数据进行缩5-1搭服务器nodejs介nodeJS是近几年才兴起的新技术，使用的是JavaScript语法，用于高性能后端服务的开发。nodeJS服务时，性能非常突出。nodeJSWebServer，程序执行的开销也少，因此nodeJS系统占用很少的系统资源，控制了运行的成本[19]。nodeJS的解释引擎基于V8，V8是Chrome的JS引擎，执行效率非常高。性能是务器。nodejs采用一系列“非阻塞”库来支持“循环”的方式，面对大规模搭nodejsexpress框架。ExpressNode.js平台的灵活web应用开发框架，它提供一系列强大的特性，帮助创建各种Web和移动express框架：express-e安装nodejs依赖模块：npminstall到此，整体的搭建完运行服务：supervisorbin/www实时监测项 node_modules,存放所有的项目依赖库。Views，页面文件(Ejs1.路径：/，页面：index.html，直接，varrouter=varpathrequire("path");//pathvarmedia=，varrouter=varpathrequire("path");//pathvarmedia=path.join(dirname,"../public/media");router.get('/',function(req,res,next){varfsrequire("fs");//fs.readdir(media,function(err,names){if(err){res.render('index',{title:'musicvisualization',music: module.exports=前端页面设功能的完整性，最重要突出可视化界面的主体性。前端技术采用bootstrapjQuery5-2经过界面风格的调试框架规划和颜色字体等样式的多次调节尝试下，5-3加载本地或服务器端音频1.2.音响设备3.音频处理过程资源时，需经过路由返回音频资源列表至前端使用ejs循环获 返回的资源列表并显<div<div<ul}}varvarrequestnewXMLHttpRequest();//ajax y(url构造一个方法，在选中后传入URLn=++count;",,="<%<%function(name){<lititle="<%=name%>"><%=name<% varlisvarlis=$("#listfor(vari=0;i<lis.length;i++){lis[i].onclick=function(){//onclickfor(varj=0;j<lis.length;j++){lis[j].className="";}this.classNameselected";//选定}}ajaxfunctionresize()height=functionresize()height=width=可视化方法选择机artypes=$("#typeartypes=$("#typefor(vari=0;i<types.length;i++){types[i].onclick=function(){for(varj=0;j<types.length;j++){types[j].className="";}}}可视化空间适音频音量控对音量进行控制，比如说调节的音量。使用WebAudioAPI，我们可以使用AudioGainNode来音乐。5-4webaudiovarvargainNodecontext.createGainNode();//创建一个gainsource.connect(gainNode);//将实例与gainnodegainNode.connect(context.destination);//gainnodegainNode.gain.value0.5;问题修ajax我们可以在一首歌成功并之后，将buffersource保存下来，当点曲正在加载，因此我们可以停止这个进行并进行当前的歌曲的加载过程。同时在遇到音频并未加载或并未request.onload=function(){}count，每调用加载函数，进行计数操作。在我们点击下一首歌曲之前n=count而当我们点击下一首歌曲count会增request.onload=function(){}6四年的读书这个季节即将划上一个句号而我将面对人生又一次旅途她扮演着亦师亦母的角色，给予了我很多的帮助和。本科学习阶段，老师对 最后，感谢在我成长的过程中给予我帮助的所有老师、朋友和。人生切地感受到，这是活着；正是因为这些坎坷的存在，我们才能发现老师、[1],黄东军,.音乐可视化及其研究进展[J].计算机仿真,2008,文化·动漫游戏2011年第11屈天喜,黄东军,.音乐可视化研究综述[J].计算机科学,2007,,.关于B/S架构的深入探析[J].科技信息:学术研究,WEBAUDIOAPI.BorisSmus..Web3DWebWebGLO3D为例[J].科技广场,2010(5):81-86.卞敏捷,,,等.Web3D可视化技术的研究与应用[J].计算机技术与发展,2015(6):141-144..NodeJSJavaScript运行环境[J].程序员,2010(12):29-29.[10]SpuyRexVanDerSoundwiththeWebAudioAPIAdvancedGameDesignwithHTML5andJavaScript.Apress,2015:331-368.[11].基于数字音频信号处理技术的研究[D].电子科技大学,JosDirksen[美].Three.js开发指南[M].机械工业,JosDirksen[美].Three.js开发指南[M].机械工业,.浅析多应用中的音频处理技术[J].民营科技,2012(11):48-.浅谈数字音频处理技术[J].影视技术1995(8):28-SmusB.WebaudioAPI[M].O'ReillyMedia,屈天喜.基于情感识别的实时交互式音乐可视化研究[D].中南大学,2008.[18]《three.js详解》 [19],.基于HTML5+nodeJS+MongoDB构建图像编辑器系[J].福建电脑2015(6):42-[20].基于nodejs系统的设计与实现[D].电子科技大学,1DesignofabinauralsynthesisprocessorinthebrowserusingWeb

Author:ArnauJuli`aBinauraltechnologyintendstorecreatea3Dsoundexperienceoverheadphones.Thiscanbeachievedbymeansofbinauralrecordings(usingmicrophonesinsertedintheearc)orbybinauralsynthesis.Thelattersimulatesvirtualsourcesandroomeffectusingdedicatedfilters,namelyTheWebAudioAPIisaW3CstandardAPIforprocessingandsynthesizingaudioinwebapplications.Asitisstillinaprocessofdevelopmentandthe ationisscarce,adeepstudyoftheWebAudioAPIhasbeendone.Theaimofthisprojectistodevelopareal-timebinauralsynthesisprocessorinthebrowserusingtheWebAudioAPI.Forthebinauralsynthesisapproach,twodifferentprocessingstructureshavebeendeveloped:synthesisofmeasuredHRTFfiltersandsynthesisofmeasuredHRTFfiltersmodeledasIIRfiltersandadelay.TheWebAudioAPI(WAA)isahigh-levelJavaScript(JS)WebAPIfromtheAudioWorkingGroupofW3Cforprocessingandsynthesizingaudioinwebapplications.ThisAPIwasfirstdraftedbyChrisRogersinDecember2011anditiscurrentlyeditedbyChrisWilson()andPaulAdenot(Mozilla).TheWAAisbasedonanaudioroutinggraphparadigm,whereAudioNodeobjectsareconnectedtogethertocreatetheaudioscenario,similartootheraudioapplicationssuchase.g.,Max/MSPorPureData.Unlikethesetwolatestsoftwares,WAAisnotavisualprogramminglanguage.PriortothecreationoftheWebAudioAPI,theuseoftheaudiointhebrowserwasverybasic.ThankstotheintroductionoftheaudioHTMLelementinHTML5,itwaspossibletoyaudiofilesonthebrowserthroughastandardAPI.Nevertheless,theaudioelementonlyallowsbasicstreamingaudioyback.Thus,thenextstepwastocreateaprocessingaudioAPI,theWebAudioAPI.OneofthepowerfulpointsofWebAudioAPIisthattheactualaudioprocessingisdoneintheunderlyingimplementationofthebrowser,thatistosay,inAssembly/C/C++code.Thislow-levelimplementationallowstoachievelowlatencyvalues-consideringlatencythetimebetweentheuserexecuteanactionandthesoundisavailableattheoutput-,highCPUperformanceand,inconclusion,itallowstohavegoodaudioprocessingtoolsinthebrowser.AnAudioDataAPIbasedonJSprocessinghadbeenpreviouslydevelopedbytheMozillaproject.ThisAPIisnowdeprecated,butitformedthebasisoftheScriptProcessorNode.TheScriptProcessorNodeisaspecialnodeoftheWAAthatsupportsJSprocessing.Currently,theWAAisavailableinthelatestversionsofChrome,Firefox,Safari,Opera,ChromeforAndroid,FirefoxforAndroid,OperaandiOSSafarianditisbeingimplementedinInternetExplorer.Therefore,itiswidelyavailable,anddevelopershaveaccesstoa powerfultoolforcreatingaudioapplicationsinwebbrowsers.Inaddition,asusualwhentalkingaboutwebapplications,itispossibletodesignanapplicationbyusingthesamecodefordifferentdevicesandoperatingsystems.TostartworkingwiththeWebAudioAPIitisnecessarytocreateanAudioContextonwhichalltheAudioNodeobjectswillbecreated.HowtheWebAudioAPIWebrichapplicationsarewrittenusingHTML5,CSSandJSamongothers.JSwasbornasasimplescriptlanguageforthebrowserandithistoricallysuffersanimportantlimitation:allitsexecutionprocessremainsinsideauniquethread,themainthread.TheintensiveuseofJSinmodernwebapplicationsandthefactthatthereal-timeaudioprocessinghasspecialtemporalrequirements-anditdoesnothaveanypriorityinsidethemainthread-leadustotheconclusionthatitisnotagoodideatoexecuteaudio-processingoperationsinthemain-thread.TheWAAsolvesthisproblemby ngmostoftheactualprocessingintheunderlyingimplementationofthebrowser,andtherefore,inaseparatethreadcalledtheaudiothread,andbyexposinganinterfaceinJavaScripttoin ctwiththeaudio-processingtools.Oneofthemostimportantthingswhenworkingwithreal-timeaudioistohaveaverypreciseclockfortheuseofaudioeventssuchasdrummachines,gamesorsequencers.TheWebAudioAPIexposesaccesstotheaudiosubsystem’shardwareclockasapropertyofAudioContextcalledcurrentTime.ThispropertyisatimeinfractionsofsecondswhichstartsatzerowhentheAudioContextiscreatedanditincreasesinreal-time.Thistimecorrespondsanever-increasinghardwaretimestamp.Theaudioclockworksintheaudiothread,buttheuserhasaccesstoitthroughtheAudioContextcurrentTimepropertyexposedinthemainthread.Therefore,theaudioclockisupdatedinsidetheaudiothreadanditisreadinthemainthread.Thisreadisdoneevery128audiosamples,thustheperiodofupdateofthecurrentTimewithatypicalsamplingrateof44100Hzleadstoanupdaterateofapproximay3ms.Thisupdateperiodcouldbeconsideredaccurateenoughforthemajorityofaudioapplications.ThedecisionofdonothavingasampleaccurateupdateofthecurrentTimepropertyinthemainthreadisbasedonthatitisnotpossibletoguaranteethatthemainthreadwillbeenoughaccuratebetweenacquiringthecurrentTime’svaluefromtheaudiothreada