一个模拟音频条的小程序

JS:

<mce:script type="text/javascript"><!-- /** * CreateBar (FF,IE6/7/8,opera) * * verson: 3.0 (20081224) * author: yangf * email: yan-guofeng@126.com */ function id(elem){ return document.getElementById(elem) || document.body[elem]; } /** * @method CB - 创建音频条的方法 * @param {Number} n - 必须 音频条的数目 * @param {Number} width - 必须 创建时音频条的宽度 */ CreateBar.prototype.CB = function(n,width){ /* *创建如下的DOM *<div class="box"> *<div class="colorLay"></div> *</div> */ var box = document.createElement("div"); box.className = "box"; box.innerHTML = "<div class='colorLay' id='cb"+ n+"' style='width:"+ width +"%' onclick='alert (this.id)'></div>"; document.body.appendChild(box); } /** * @method play - 音频条长短变化播放方法 * @param {Number} speed - 必须 音频条变化的速度 speed/ms * @param {Array } ar - 可省 如果有此参数则按照数组的值进行播放 */ CreateBar.prototype.play = function(speed,ar){ var n = this.num; if(arguments.length==1){ //没有数组,则随机播放 this.a = setInterval(function(){ //循环更改每个音频条的长度 for(var i=0;i<n;i++) { //改长度为随机数(1~100) var r = Math.random()*100; var c = id("cb"+i); c.style.width = r + "%"; } },speed); } else{ //如果有数组参数传递进来 var k = 0; //数组的第一维是播放时间(第几秒),如果播放完毕则从头再开始 this.a = setInterval(function(){ //循环更改每个音频条的长度 for(var i=0;i<n;i++) { var c = id("cb"+i); c.style.width = ar[k][i][1] + "%"; };k++; if(k==ar.length){k=0;} //播放完毕,从头开始计数 },speed); } } /** * @method stopPlay - 停止播放的方法 */ CreateBar.prototype.stopPlay = function(){ if(this.a){ clearInterval(this.a); } } /** * CreateBar 创建音频条的构造函数 * @param {Number} n - 必须 音频条的数目 */ function CreateBar(n){ if((typeof n)!== "number" || n<1){ return;} this.num = n; //循环创建音频条 for(i=0;i<n;i++){ this.CB(i,0); } } var ar = new Array( [[1,10],[2,20],[3,30],[4,40]], [[1,20],[2,30],[3,40],[4,50]], [[1,30],[2,40],[3,50],[4,60]], [[1,40],[2,50],[3,60],[4,70]], [[1,50],[2,60],[3,70],[4,80]] ) var ar1 = new Array( [[1,60],[2,10],[3,10],[4,60]], [[1,40],[2,20],[3,20],[4,40]], [[1,60],[2,10],[3,10],[4,60]], [[1,40],[2,20],[3,20],[4,40]], [[1,60],[2,10],[3,10],[4,60]] ) var ar2 = new Array( [[1,60],[2,50],[3,40],[4,30]], [[1,50],[2,60],[3,50],[4,40]], [[1,40],[2,50],[3,60],[4,50]], [[1,30],[2,40],[3,50],[4,60]] ) var c = new CreateBar(4); c.play(100); // --></mce:script>

 

CSS:

<mce:style type="text/css"><!-- .box { position:relative; width:310px; height:15px; border:1px solid #AAA; font-size:13px; text-align:left; line-height:25px;} .colorLay{ margin-top:2px; margin-left:2px; height:11px; width:40%; background-color:#B667FF;} --></mce:style><style type="text/css" mce_bogus="1">.box { position:relative; width:310px; height:15px; border:1px solid #AAA; font-size:13px; text-align:left; line-height:25px;} .colorLay{ margin-top:2px; margin-left:2px; height:11px; width:40%; background-color:#B667FF;} </style>

 

HTML:

播放间隔: ms <input type="button" onClick="c.stopPlay();c.play(100)" value="0.1秒"> <input type="button" onClick="c.stopPlay();c.play(500)" value="0.5秒"> <input type="button" onClick="c.stopPlay();c.play(1000)" value="1秒"> <input type="button" onClick="c.stopPlay();c.play(2000)" value="2秒"> <input type="button" onClick="c.stopPlay();" value="stop"> <input type="button" onClick="c.stopPlay();c.play(100,ar);" value="播放1"> <input type="button" onClick="c.stopPlay();c.play(100,ar1);" value="播放2"> <input type="button" onClick="c.stopPlay();c.play(100,ar2);" value="播放3">