HTML5之Canvas（二）——画曲线quadraticCurveTo、bezierCurveTo

2014年2月23日 chen

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
        var ctx = canvas.getContext( "2d" ); // 获取画笔

        ctx.beginPath();
        ctx.lineWidth = 2; // 粗细
        ctx.strokeStyle = 'rgb( 200, 200, 200 )';  // 颜色
        ctx.moveTo( 100, 100 );
        ctx.lineTo( 200, 200 );
        ctx.lineTo( 100, 200 );
        ctx.lineTo( 100, 100 );
        ctx.stroke();

        ctx.beginPath();
        // 设置画笔属性
        ctx.lineWidth = 2; // 粗细
        ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )';  // 颜色

        // void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
        ctx.moveTo( 100, 100 );  // 起始点
        // 二次贝塞尔曲线
        //                    控制点     结尾点  
        ctx.quadraticCurveTo( 200, 200, 100, 200 );

        // 渲染
        ctx.stroke();

        ctx.beginPath();
        ctx.lineWidth = 2; // 粗细
        ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )';  // 颜色

        ctx.moveTo( 400, 200 );  // 起始点
        // void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
        // 三次贝塞尔曲线
        //                第一控制点 第二控制点 结束点
        ctx.bezierCurveTo( 600, 200, 600, 400, 400, 400 );

        ctx.stroke();
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Canvas</title>

</head>

<body>

var ctx = canvas.getContext( "2d" ); // 获取画笔

ctx.beginPath();

ctx.lineWidth = 2; // 粗细

ctx.strokeStyle = 'rgb( 200, 200, 200 )'; // 颜色

ctx.moveTo( 100, 100 );

ctx.lineTo( 200, 200 );

ctx.lineTo( 100, 200 );

ctx.lineTo( 100, 100 );

ctx.stroke();

ctx.beginPath();

// 设置画笔属性

ctx.lineWidth = 2; // 粗细

ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 颜色

// void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);

ctx.moveTo( 100, 100 ); // 起始点

// 二次贝塞尔曲线

// 控制点结尾点

ctx.quadraticCurveTo( 200, 200, 100, 200 );

// 渲染

ctx.stroke();

ctx.beginPath();

ctx.lineWidth = 2; // 粗细

ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 颜色

ctx.moveTo( 400, 200 ); // 起始点

// void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);

// 三次贝塞尔曲线

// 第一控制点第二控制点结束点

ctx.bezierCurveTo( 600, 200, 600, 400, 400, 400 );

ctx.stroke();

</script>

</body>

</html>

测试连接

canvas、html5

HTML5之Canvas（二）——画曲线arc、arcTo

2014年2月23日 chen

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
        var ctx = canvas.getContext( "2d" ); // 获取画笔

        // 设置画笔属性
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )';  // 线颜色
        ctx.fillStyle =  'rgba( 255, 0, 0, 0.5 )';  // 填充颜色

        // void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);
        //       圆心X  圆心Y 半径 起始点  结束点  顺/逆时针 
        ctx.arc( 300, 300, 200, 0, Math.PI * 2 / 4, 1 );
        ctx.fill(); // 填充

        // void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
        ctx.moveTo( 400, 100 );
        ctx.arcTo( 700, 100, 600, 200, 50 );

        ctx.stroke();   // 滑线
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Canvas</title>

</head>

<body>

var ctx = canvas.getContext( "2d" ); // 获取画笔

// 设置画笔属性

ctx.lineWidth = 2;

ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 线颜色

ctx.fillStyle = 'rgba( 255, 0, 0, 0.5 )'; // 填充颜色

// void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);

// 圆心X 圆心Y 半径起始点结束点顺/逆时针

ctx.arc( 300, 300, 200, 0, Math.PI * 2 / 4, 1 );

ctx.fill(); // 填充

// void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);

ctx.moveTo( 400, 100 );

ctx.arcTo( 700, 100, 600, 200, 50 );

ctx.stroke(); // 滑线

</script>

</body>

</html>

测试连接

参考：http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE6%EF%BC%9A%E7%94%BB%E6%9B%B2%E7%BA%BF%E4%B9%8Barcto/

canvas、html5

HTML5之Canvas（一）——画起来

2014年2月23日 chen

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        var ctx = canvas.getContext( "2d" ); // 获取画笔

        // 画图
        ctx.moveTo( 10, 10 );
        ctx.lineTo( 110, 10 );
        ctx.lineTo( 110, 110 );
        ctx.lineTo( 10, 110 );
        ctx.lineTo( 10, 10 );

        ctx.moveTo( 150, 10 );
        ctx.lineTo( 150, 100 );

        // 设置画笔属性
        ctx.lineWidth = 10; // 粗细
        ctx.lineJoin = 'round';  
        // lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角）
        ctx.lineCap = 'round'; 
        //即lineCap属性，这个就是定义线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方）
        ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )';  // 颜色
        // ctx.closePath();  // 闭合路径

        // 渲染
        ctx.stroke();
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Canvas</title>

</head>

<body>

var ctx = canvas.getContext( "2d" ); // 获取画笔

// 画图

ctx.moveTo( 10, 10 );

ctx.lineTo( 110, 10 );

ctx.lineTo( 110, 110 );

ctx.lineTo( 10, 110 );

ctx.lineTo( 10, 10 );

ctx.moveTo( 150, 10 );

ctx.lineTo( 150, 100 );

// 设置画笔属性

ctx.lineWidth = 10; // 粗细

ctx.lineJoin = 'round';

// lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角）

ctx.lineCap = 'round';

//即lineCap属性，这个就是定义线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方）

ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 颜色

// ctx.closePath(); // 闭合路径

// 渲染

ctx.stroke();

</script>

</body>

</html>

interface CanvasElement : Element {
               attribute unsigned long width;
               attribute unsigned long height;

      DOMString toDataURL(optional in DOMString type, in any... args);

      Object getContext(in DOMString contextId);
    };

interface CanvasElement : Element {

attribute unsigned long width;

attribute unsigned long height;

DOMString toDataURL(optional in DOMString type, in any... args);

Object getContext(in DOMString contextId);

};

interface CanvasRenderingContext2D {

          // back-reference to the canvas readonly attribute HTMLCanvasElement canvas;

          // state void save(); // push state on state stack void restore(); // pop state stack and restore state

          // transformations (default transform is the identity matrix)
          void scale(in float x, in float y);
          void rotate(in float angle);
          void translate(in float x, in float y);
          void transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
          void setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);

          // compositing attribute float globalAlpha; // (default 1.0)
                   attribute DOMString globalCompositeOperation; // (default source-over)

          // colors and styles attribute any strokeStyle; // (default black)
                   attribute any fillStyle; // (default black)
          CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);
          CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
          CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);
          CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);
          CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);

          // line caps/joins attribute float lineWidth; // (default 1)
                   attribute DOMString lineCap; // "butt", "round", "square" (default "butt")
                   attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")
                   attribute float miterLimit; // (default 10)

          // shadows attribute float shadowOffsetX; // (default 0)
                   attribute float shadowOffsetY; // (default 0)
                   attribute float shadowBlur; // (default 0)
                   attribute DOMString shadowColor; // (default transparent black)

          // rects void clearRect(in float x, in float y, in float w, in float h);
          void fillRect(in float x, in float y, in float w, in float h);
          void strokeRect(in float x, in float y, in float w, in float h);

          // path API void beginPath();
          void closePath();
          void moveTo(in float x, in float y);
          void lineTo(in float x, in float y);
          void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
          void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
          void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
          void rect(in float x, in float y, in float w, in float h);
          void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);
          void fill();
          void stroke();
          void clip();
          boolean isPointInPath(in float x, in float y);

          // text attribute DOMString font; // (default 10px sans-serif)
                   attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")
                   attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
          void fillText(in DOMString text, in float x, in float y, optional in float maxWidth);
          void strokeText(in DOMString text, in float x, in float y, optional in float maxWidth);
          TextMetrics measureText(in DOMString text);

          // drawing images void drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw, in float dh);
          void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
          void drawImage(in HTMLCanvasElement image, in float dx, in float dy, optional in float dw, in float dh);
          void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
          void drawImage(in HTMLVideoElement image, in float dx, in float dy, optional in float dw, in float dh);
          void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

          // pixel manipulation
          ImageData createImageData(in float sw, in float sh);
          ImageData createImageData(in ImageData imagedata);
          ImageData getImageData(in float sx, in float sy, in float sw, in float sh);
          void putImageData(in ImageData imagedata, in float dx, in float dy, optional in float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);
        };

        interface CanvasGradient {
          // opaque object void addColorStop(in float offset, in DOMString color);
        };

        interface CanvasPattern {
          // opaque object
        };

        interface TextMetrics {
          readonly attribute float width;
        };

        interface ImageData {
          readonly attribute unsigned long width;
          readonly attribute unsigned long height;
          readonly attribute CanvasPixelArray data;
        };

        interface CanvasPixelArray {
          readonly attribute unsigned long length;
          getter octet (in unsigned long index);
          setter void (in unsigned long index, in octet value);
        };

interface CanvasRenderingContext2D {

// back-reference to the canvas readonly attribute HTMLCanvasElement canvas;

// state void save(); // push state on state stack void restore(); // pop state stack and restore state

// transformations (default transform is the identity matrix)

void scale(in float x, in float y);

void rotate(in float angle);

void translate(in float x, in float y);

void transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);

void setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);

// compositing attribute float globalAlpha; // (default 1.0)

attribute DOMString globalCompositeOperation; // (default source-over)

// colors and styles attribute any strokeStyle; // (default black)

attribute any fillStyle; // (default black)

CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);

CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);

CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);

CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);

CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);

// line caps/joins attribute float lineWidth; // (default 1)

attribute DOMString lineCap; // "butt", "round", "square" (default "butt")

attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")

attribute float miterLimit; // (default 10)

// shadows attribute float shadowOffsetX; // (default 0)

attribute float shadowOffsetY; // (default 0)

attribute float shadowBlur; // (default 0)

attribute DOMString shadowColor; // (default transparent black)

// rects void clearRect(in float x, in float y, in float w, in float h);

void fillRect(in float x, in float y, in float w, in float h);

void strokeRect(in float x, in float y, in float w, in float h);

// path API void beginPath();

void closePath();

void moveTo(in float x, in float y);

void lineTo(in float x, in float y);

void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);

void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);

void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);

void rect(in float x, in float y, in float w, in float h);

void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);

void fill();

void stroke();

void clip();

boolean isPointInPath(in float x, in float y);

// text attribute DOMString font; // (default 10px sans-serif)

attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")

attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")

void fillText(in DOMString text, in float x, in float y, optional in float maxWidth);

void strokeText(in DOMString text, in float x, in float y, optional in float maxWidth);

TextMetrics measureText(in DOMString text);

// drawing images void drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw, in float dh);

void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

void drawImage(in HTMLCanvasElement image, in float dx, in float dy, optional in float dw, in float dh);

void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

void drawImage(in HTMLVideoElement image, in float dx, in float dy, optional in float dw, in float dh);

void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

// pixel manipulation

ImageData createImageData(in float sw, in float sh);

ImageData createImageData(in ImageData imagedata);

ImageData getImageData(in float sx, in float sy, in float sw, in float sh);

void putImageData(in ImageData imagedata, in float dx, in float dy, optional in float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);

};

interface CanvasGradient {

// opaque object void addColorStop(in float offset, in DOMString color);

};

interface CanvasPattern {

// opaque object

};

interface TextMetrics {

readonly attribute float width;

};

interface ImageData {

readonly attribute unsigned long width;

readonly attribute unsigned long height;

readonly attribute CanvasPixelArray data;

};

interface CanvasPixelArray {

readonly attribute unsigned long length;

getter octet (in unsigned long index);

setter void (in unsigned long index, in octet value);

};

测试连接

参考：http://dev.w3.org/2006/canvas-api/canvas-2d-api.html

http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE%E6%95%99%E7%A8%8B2%EF%BC%9A%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E7%94%BB%E7%BA%BF%E6%9D%A1/

audio、html5

HTML5之Audio（七）—— processor绘制波形图

2014年2月23日 chen

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Audio</title>
</head>
<body>
    VOL:<input type="range" min="0" max="100" value="100" id="volume" />
    <br/>
    L<input type="range" min="0" max="200" value="100" id="equalizer" />R
    <br/>
    <canvas id="canvas" width="1000" height="500"></canvas>
    <script>
        var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性
            context = new AudioContext, // 创建Audio上下文
            audio = new Audio( '茜拉 - 想你的夜.mp3' ),
            media = context.createMediaElementSource( audio ), // 从元素创建媒体节点
            lGain = context.createGain(),   // 左声道
            rGain = context.createGain(),   // 右声道
            splitter = context.createChannelSplitter(2),  // 分离器
            merger = context.createChannelMerger(2),    // 合成器
            processor = context.createScriptProcessor( 4096, 1, 1 ),
            width = canvas.width, height = canvas.height,
            g = canvas.getContext("2d"),        // canvas
            vol = 100,    // 音量
            lVol = 100,     // 左声道
            rVol = 100      // 右声道
            ;
            /*
                             → lGain
            media → splitter         → merger → destination
                             → rGain
            */
            lGain.gain.value = 1;
            rGain.gain.value = 1;
            g.translate( 0.5, height / 2 + 0.5 );

            media.connect( splitter );
            splitter.connect( lGain, 0 );
            splitter.connect( rGain, 1 );
            lGain.connect( merger, 0, 0 );
            rGain.connect( merger, 0, 1 );
            merger.connect( processor );
            processor.connect( context.destination );

            //控制节点的过程处理
            processor.onaudioprocess=function(e){
                //获取输入和输出的数据缓冲区
                var input = e.inputBuffer.getChannelData(0);
                var output = e.outputBuffer.getChannelData(0);
                //将输入数缓冲复制到输出缓冲上
                for( var i = 0; i < input.length; i++ ) output[i] = input[i];
                //将缓冲区的数据绘制到Canvas上
                g.clearRect( -0.5, -height / 2 - 0.5, width, height );
                g.beginPath();
                for(var i = 0; i < width; i++ ) {
                    g.lineTo( i, height / 2 * output[ output.length * i / width | 0 ] );
                }
                g.stroke();
            };

            //音量控制
            onloadvol = volume.onchange = function() {
                vol = volume.value;
                setVolume();
            };

            // 声道控制
            onloadequ = equalizer.onchange = function() {
                lVol = equalizer.value > 100 ? 100 : equalizer.value;
                rVol = equalizer.value < 100 ? 100 : ( 200 - equalizer.value );
                setVolume()
            }
            // 设置音量
            function setVolume() {
                lGain.gain.value = lVol / 100 * vol / 100;
                rGain.gain.value = rVol / 100 * vol / 100;
            }

            audio.play(); //播放
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Audio</title>

</head>

<body>

VOL:<input type="range" min="0" max="100" value="100" id="volume" />

<br/>

L<input type="range" min="0" max="200" value="100" id="equalizer" />R

<br/>

var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性

context = new AudioContext, // 创建Audio上下文

audio = new Audio( '茜拉 - 想你的夜.mp3' ),

media = context.createMediaElementSource( audio ), // 从元素创建媒体节点

lGain = context.createGain(), // 左声道

rGain = context.createGain(), // 右声道

splitter = context.createChannelSplitter(2), // 分离器

merger = context.createChannelMerger(2), // 合成器

processor = context.createScriptProcessor( 4096, 1, 1 ),

width = canvas.width, height = canvas.height,

g = canvas.getContext("2d"), // canvas

vol = 100, // 音量

lVol = 100, // 左声道

rVol = 100 // 右声道

;

→ lGain

media → splitter → merger → destination

→ rGain

lGain.gain.value = 1;

rGain.gain.value = 1;

g.translate( 0.5, height / 2 + 0.5 );

media.connect( splitter );

splitter.connect( lGain, 0 );

splitter.connect( rGain, 1 );

lGain.connect( merger, 0, 0 );

rGain.connect( merger, 0, 1 );

merger.connect( processor );

processor.connect( context.destination );

//控制节点的过程处理

processor.onaudioprocess=function(e){

//获取输入和输出的数据缓冲区

var input = e.inputBuffer.getChannelData(0);

var output = e.outputBuffer.getChannelData(0);

//将输入数缓冲复制到输出缓冲上

for( var i = 0; i < input.length; i++ ) output[i] = input[i];

//将缓冲区的数据绘制到Canvas上

g.clearRect( -0.5, -height / 2 - 0.5, width, height );

g.beginPath();

for(var i = 0; i < width; i++ ) {

g.lineTo( i, height / 2 * output[ output.length * i / width | 0 ] );

}

g.stroke();

};

//音量控制

onloadvol = volume.onchange = function() {

vol = volume.value;

setVolume();

};

// 声道控制

onloadequ = equalizer.onchange = function() {

lVol = equalizer.value > 100 ? 100 : equalizer.value;

rVol = equalizer.value < 100 ? 100 : ( 200 - equalizer.value );

setVolume()

}

// 设置音量

function setVolume() {

lGain.gain.value = lVol / 100 * vol / 100;

rGain.gain.value = rVol / 100 * vol / 100;

}

audio.play(); //播放

</script>

</body>

</html>

测试连接

audio、html5

HTML5之Audio（六）—— 3D音效

2014年2月23日 chen

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Audio</title>
</head>
<body>
    VOL:<input type="range" min="0" max="100" value="100" id="volume" />
    <br/>
    L<input type="range" min="0" max="200" value="100" id="equalizer" />R
    <script>
        var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性
            context = new AudioContext, // 创建Audio上下文
            audio = new Audio( '茜拉 - 想你的夜.mp3' ),
            media = context.createMediaElementSource( audio ), // 从元素创建媒体节点
            lGain = context.createGain(),   // 左声道
            rGain = context.createGain(),   // 右声道
            splitter = context.createChannelSplitter(2),  // 分离器
            merger = context.createChannelMerger(2),    // 合成器
            panner = context.createPanner(),            // 声像处理器
            vol = 100,    // 音量
            lVol = 100,     // 左声道
            rVol = 100      // 右声道
            ;
            /*
                             → lGain
            media → splitter         → merger → panner → destination
                             → rGain
            */
            lGain.gain.value = 1;
            rGain.gain.value = 1;
            panner.setOrientation( 0, 1, 0 );      //方向朝向收听者
            var a = 0, r = 8;
            setInterval( function() {
              //然声源绕着收听者以8的半径旋转
              panner.setPosition( Math.sin( a / 100 ) * r , 0, Math.cos (a / 100 ) * r );
              a++;
            }, 16 );

            media.connect( splitter );
            splitter.connect( lGain, 0 );
            splitter.connect( rGain, 1 );
            lGain.connect( merger, 0, 0 );
            rGain.connect( merger, 0, 1 );
            merger.connect( panner );
            panner.connect( context.destination );

            //音量控制
            onloadvol = volume.onchange = function() {
                vol = volume.value;
                setVolume();
            };

            // 声道控制
            onloadequ = equalizer.onchange = function() {
                lVol = equalizer.value > 100 ? 100 : equalizer.value;
                rVol = equalizer.value < 100 ? 100 : ( 200 - equalizer.value );
                setVolume()
            }
            // 设置音量
            function setVolume() {
                lGain.gain.value = lVol / 100 * vol / 100;
                rGain.gain.value = rVol / 100 * vol / 100;
            }

            audio.play(); //播放
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Audio</title>

</head>

<body>

VOL:<input type="range" min="0" max="100" value="100" id="volume" />

<br/>

L<input type="range" min="0" max="200" value="100" id="equalizer" />R

var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性

context = new AudioContext, // 创建Audio上下文

audio = new Audio( '茜拉 - 想你的夜.mp3' ),

media = context.createMediaElementSource( audio ), // 从元素创建媒体节点

lGain = context.createGain(), // 左声道

rGain = context.createGain(), // 右声道

splitter = context.createChannelSplitter(2), // 分离器

merger = context.createChannelMerger(2), // 合成器

panner = context.createPanner(), // 声像处理器

vol = 100, // 音量

lVol = 100, // 左声道

rVol = 100 // 右声道

;

→ lGain

media → splitter → merger → panner → destination

→ rGain

lGain.gain.value = 1;

rGain.gain.value = 1;

panner.setOrientation( 0, 1, 0 ); //方向朝向收听者

var a = 0, r = 8;

setInterval( function() {

//然声源绕着收听者以8的半径旋转

panner.setPosition( Math.sin( a / 100 ) * r , 0, Math.cos (a / 100 ) * r );

a++;

}, 16 );

media.connect( splitter );

splitter.connect( lGain, 0 );

splitter.connect( rGain, 1 );

lGain.connect( merger, 0, 0 );

rGain.connect( merger, 0, 1 );

merger.connect( panner );

panner.connect( context.destination );

//音量控制

onloadvol = volume.onchange = function() {

vol = volume.value;

setVolume();

};

// 声道控制

onloadequ = equalizer.onchange = function() {

lVol = equalizer.value > 100 ? 100 : equalizer.value;

rVol = equalizer.value < 100 ? 100 : ( 200 - equalizer.value );

setVolume()

}

// 设置音量

function setVolume() {

lGain.gain.value = lVol / 100 * vol / 100;

rGain.gain.value = rVol / 100 * vol / 100;

}

audio.play(); //播放

</script>

</body>

</html>

enum PanningModelType {
  "equalpower",
  "HRTF"
};

enum DistanceModelType {
  "linear",
  "inverse",
  "exponential"
};

interface PannerNode : AudioNode {

    // Default for stereo is HRTF 
    attribute PanningModelType panningModel;

    // Uses a 3D cartesian coordinate system 
    void setPosition(double x, double y, double z);
    void setOrientation(double x, double y, double z);
    void setVelocity(double x, double y, double z);

    // Distance model and attributes 
    attribute DistanceModelType distanceModel;
    attribute double refDistance;
    attribute double maxDistance;
    attribute double rolloffFactor;

    // Directional sound cone 
    attribute double coneInnerAngle;
    attribute double coneOuterAngle;
    attribute double coneOuterGain;

};

enum PanningModelType {

"equalpower",

"HRTF"

};

enum DistanceModelType {

"linear",

"inverse",

"exponential"

};

interface PannerNode : AudioNode {

// Default for stereo is HRTF

attribute PanningModelType panningModel;

// Uses a 3D cartesian coordinate system

void setPosition(double x, double y, double z);

void setOrientation(double x, double y, double z);

void setVelocity(double x, double y, double z);

// Distance model and attributes

attribute DistanceModelType distanceModel;

attribute double refDistance;

attribute double maxDistance;

attribute double rolloffFactor;

// Directional sound cone

attribute double coneInnerAngle;

attribute double coneOuterAngle;

attribute double coneOuterGain;

};

setPosition、setOrientation、setVelocity，这些方法来设置声源的位置、朝向、运动。

1	setPosition、setOrientation、setVelocity，这些方法来设置声源的位置、朝向、运动。

测试连接

audio、html5

HTML5之Audio（五）—— 声音过滤

2014年2月23日 chen

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Audio</title>
</head>
<body>
    VOL:<input type="range" min="0" max="100" value="100" id="volume" />
    <br/>
    L<input type="range" min="0" max="200" value="100" id="equalizer" />R
    <br/>
    filter:<input type="range" min="0" max="5000" value="1000" id="frequency" />
    <script>
        var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性
            context = new AudioContext, // 创建Audio上下文
            audio = new Audio( '茜拉 - 想你的夜.mp3' ),
            media = context.createMediaElementSource( audio ), // 从元素创建媒体节点
            lGain = context.createGain(),   // 左声道
            rGain = context.createGain(),   // 右声道
            splitter = context.createChannelSplitter(2),  // 分离器
            merger = context.createChannelMerger(2),    // 合成器
            filter = context.createBiquadFilter(),    // 过滤器
            vol = 100,    // 音量
            lVol = 100,     // 左声道
            rVol = 100      // 右声道
            ;
            /*
                             → lGain
            media → splitter         → merger → filter → destination
                             → rGain
            */
            lGain.gain.value = 1;
            rGain.gain.value = 1;
            filter.type = filter.LOWPASS;   // 设置过滤类型
            // filter.frequency.value = 800;   // 只允许小于800的频率通过

            media.connect( splitter );
            splitter.connect( lGain, 0 );
            splitter.connect( rGain, 1 );
            lGain.connect( merger, 0, 0 );
            rGain.connect( merger, 0, 1 );
            merger.connect( filter );
            filter.connect( context.destination );

            // 过滤控制
            onloadfrequency = frequency.onchange = function() {
                filter.frequency.value = frequency.value;   // 动态设置过滤器
                console.log( frequency.value );
            }

            //音量控制
            onloadvol = volume.onchange = function() {
                vol = volume.value;
                setVolume();
            };

            // 声道控制
            onloadequ = equalizer.onchange = function() {
                lVol = equalizer.value > 100 ? 100 : equalizer.value;
                rVol = equalizer.value < 100 ? 100 : ( 200 - equalizer.value );
                setVolume()
            }
            // 设置音量
            function setVolume() {
                lGain.gain.value = lVol / 100 * vol / 100;
                rGain.gain.value = rVol / 100 * vol / 100;
            }

            audio.play(); //播放
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Audio</title>

</head>

<body>

VOL:<input type="range" min="0" max="100" value="100" id="volume" />

<br/>

L<input type="range" min="0" max="200" value="100" id="equalizer" />R

<br/>

filter:<input type="range" min="0" max="5000" value="1000" id="frequency" />

var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性

context = new AudioContext, // 创建Audio上下文

audio = new Audio( '茜拉 - 想你的夜.mp3' ),

media = context.createMediaElementSource( audio ), // 从元素创建媒体节点

lGain = context.createGain(), // 左声道

rGain = context.createGain(), // 右声道

splitter = context.createChannelSplitter(2), // 分离器

merger = context.createChannelMerger(2), // 合成器

filter = context.createBiquadFilter(), // 过滤器

vol = 100, // 音量

lVol = 100, // 左声道

rVol = 100 // 右声道

;

→ lGain

media → splitter → merger → filter → destination

→ rGain

lGain.gain.value = 1;

rGain.gain.value = 1;

filter.type = filter.LOWPASS; // 设置过滤类型

// filter.frequency.value = 800; // 只允许小于800的频率通过

media.connect( splitter );

splitter.connect( lGain, 0 );

splitter.connect( rGain, 1 );

lGain.connect( merger, 0, 0 );

rGain.connect( merger, 0, 1 );

merger.connect( filter );

filter.connect( context.destination );

// 过滤控制

onloadfrequency = frequency.onchange = function() {

filter.frequency.value = frequency.value; // 动态设置过滤器

console.log( frequency.value );

}

//音量控制

onloadvol = volume.onchange = function() {

vol = volume.value;

setVolume();

};

// 声道控制

onloadequ = equalizer.onchange = function() {

lVol = equalizer.value > 100 ? 100 : equalizer.value;

rVol = equalizer.value < 100 ? 100 : ( 200 - equalizer.value );

setVolume()

}

// 设置音量

function setVolume() {

lGain.gain.value = lVol / 100 * vol / 100;

rGain.gain.value = rVol / 100 * vol / 100;

}

audio.play(); //播放

</script>

</body>

</html>

enum BiquadFilterType {
  "lowpass",
  "highpass",
  "bandpass",
  "lowshelf",
  "highshelf",
  "peaking",
  "notch",
  "allpass"
};

interface BiquadFilterNode : AudioNode {

    attribute BiquadFilterType type;
    readonly attribute AudioParam frequency; // in Hertz
    readonly attribute AudioParam detune; // in Cents
    readonly attribute AudioParam Q; // Quality factor
    readonly attribute AudioParam gain; // in Decibels

    void getFrequencyResponse(Float32Array frequencyHz,
                              Float32Array magResponse,
                              Float32Array phaseResponse);

};

enum BiquadFilterType {

"lowpass",

"highpass",

"bandpass",

"lowshelf",

"highshelf",

"peaking",

"notch",

"allpass"

};

interface BiquadFilterNode : AudioNode {

attribute BiquadFilterType type;

readonly attribute AudioParam frequency; // in Hertz

readonly attribute AudioParam detune; // in Cents

readonly attribute AudioParam Q; // Quality factor

readonly attribute AudioParam gain; // in Decibels

void getFrequencyResponse(Float32Array frequencyHz,

Float32Array magResponse,

Float32Array phaseResponse);

};

测试连接

audio、html5

HTML5之Audio（四）—— 左右声道

2014年2月23日 chen

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Audio</title>
</head>
<body>
    VOL:<input type="range" min="0" max="100" value="100" id="volume" />
    <br/>
    L<input type="range" min="0" max="200" value="100" id="equalizer" />R
    <script>
        var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性
            context = new AudioContext, // 创建Audio上下文
            audio = new Audio( '茜拉 - 想你的夜.mp3' ),
            media = context.createMediaElementSource( audio ), // 从元素创建媒体节点
            lGain = context.createGain(),   // 左声道
            rGain = context.createGain(),   // 右声道
            splitter = context.createChannelSplitter(2),  // 分离器
            merger = context.createChannelMerger(2),    // 合成器
            vol = 100,    // 音量
            lVol = 100,     // 左声道
            rVol = 100      // 右声道
            ;
            /*
                             → lGain
            media → splitter         → merger → destination
                             → rGain
            */
            lGain.gain.value = 1;
            rGain.gain.value = 1;

            media.connect( splitter );
            splitter.connect( lGain, 0 );
            splitter.connect( rGain, 1 );
            lGain.connect( merger, 0, 0 );
            rGain.connect( merger, 0, 1 );
            merger.connect( context.destination );

            //音量控制
            onloadvol = volume.onchange = function() {
                vol = volume.value;
                setVolume();
            };

            // 声道控制
            onloadequ = equalizer.onchange = function() {
                lVol = equalizer.value > 100 ? 100 : equalizer.value;
                rVol = equalizer.value < 100 ? 100 : ( 200 - equalizer.value );
                setVolume()
            }
            // 设置音量
            function setVolume() {
                lGain.gain.value = lVol / 100 * vol / 100;
                rGain.gain.value = rVol / 100 * vol / 100;
            }

            audio.play(); //播放
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Audio</title>

</head>

<body>

VOL:<input type="range" min="0" max="100" value="100" id="volume" />

<br/>

L<input type="range" min="0" max="200" value="100" id="equalizer" />R

var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性

context = new AudioContext, // 创建Audio上下文

audio = new Audio( '茜拉 - 想你的夜.mp3' ),

media = context.createMediaElementSource( audio ), // 从元素创建媒体节点

lGain = context.createGain(), // 左声道

rGain = context.createGain(), // 右声道

splitter = context.createChannelSplitter(2), // 分离器

merger = context.createChannelMerger(2), // 合成器

vol = 100, // 音量

lVol = 100, // 左声道

rVol = 100 // 右声道

;

→ lGain

media → splitter → merger → destination

→ rGain

lGain.gain.value = 1;

rGain.gain.value = 1;

media.connect( splitter );

splitter.connect( lGain, 0 );

splitter.connect( rGain, 1 );

lGain.connect( merger, 0, 0 );

rGain.connect( merger, 0, 1 );

merger.connect( context.destination );

//音量控制

onloadvol = volume.onchange = function() {

vol = volume.value;

setVolume();

};

// 声道控制

onloadequ = equalizer.onchange = function() {

lVol = equalizer.value > 100 ? 100 : equalizer.value;

rVol = equalizer.value < 100 ? 100 : ( 200 - equalizer.value );

setVolume()

}

// 设置音量

function setVolume() {

lGain.gain.value = lVol / 100 * vol / 100;

rGain.gain.value = rVol / 100 * vol / 100;

}

audio.play(); //播放

</script>

</body>

</html>

ChannelSplitterNode createChannelSplitter(optional unsigned long numberOfOutputs = 6);
ChannelMergerNode createChannelMerger(optional unsigned long numberOfInputs = 6);

1 2	ChannelSplitterNode createChannelSplitter(optional unsigned long numberOfOutputs = 6); ChannelMergerNode createChannelMerger(optional unsigned long numberOfInputs = 6);

interface AudioNode : EventTarget {
    //////////////////////  注意   //////////////////////////
    // media,splitter,lGain,rGain,merger都继承与AudioNode
    // 使用了不同的重载
    void connect(AudioNode destination, optional unsigned long output = 0, optional unsigned long input = 0);
    void connect(AudioParam destination, optional unsigned long output = 0);
    //////////////////////  注意   //////////////////////////
    void disconnect(optional unsigned long output = 0);

    readonly attribute AudioContext context;
    readonly attribute unsigned long numberOfInputs;
    readonly attribute unsigned long numberOfOutputs;

    // Channel up-mixing and down-mixing rules for all inputs.
    attribute unsigned long channelCount;
    attribute ChannelCountMode channelCountMode;
    attribute ChannelInterpretation channelInterpretation;

};

interface AudioNode : EventTarget {

////////////////////// 注意 //////////////////////////

// media,splitter,lGain,rGain,merger都继承与AudioNode

// 使用了不同的重载

void connect(AudioNode destination, optional unsigned long output = 0, optional unsigned long input = 0);

void connect(AudioParam destination, optional unsigned long output = 0);

////////////////////// 注意 //////////////////////////

void disconnect(optional unsigned long output = 0);

readonly attribute AudioContext context;

readonly attribute unsigned long numberOfInputs;

readonly attribute unsigned long numberOfOutputs;

// Channel up-mixing and down-mixing rules for all inputs.

attribute unsigned long channelCount;

attribute ChannelCountMode channelCountMode;

attribute ChannelInterpretation channelInterpretation;

};

测试连接

audio、html5

HTML5之Audio（三）—— gain调节音量

2014年2月23日 chen

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Audio</title>
</head>
<body>
    <input type="range" min="0" max="100" id="volume" />
    <script>
        var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性
            context = new AudioContext, // 创建Audio上下文
            audio = new Audio( '茜拉 - 想你的夜.mp3' ),
            media = context.createMediaElementSource( audio ) // 从元素创建媒体节点
            ;

            var gain = context.createGain();
            gain.gain.value = 0.5;
            //连接：media→gain→destination
            media.connect ( gain );
            gain.connect( context.destination );
            //音量控制
            volume.onchange = function(){
              gain.gain.value = volume.value / 100;
            };
            //播放

            audio.play(); //播放
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Audio</title>

</head>

<body>

var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性

context = new AudioContext, // 创建Audio上下文

audio = new Audio( '茜拉 - 想你的夜.mp3' ),

media = context.createMediaElementSource( audio ) // 从元素创建媒体节点

;

var gain = context.createGain();

gain.gain.value = 0.5;

//连接：media→gain→destination

media.connect ( gain );

gain.connect( context.destination );

//音量控制

volume.onchange = function(){

gain.gain.value = volume.value / 100;

};

//播放

audio.play(); //播放

</script>

</body>

</html>

GainNode createGain();

1	GainNode createGain();

interface GainNode : AudioNode {

    readonly attribute AudioParam gain;

};

interface GainNode : AudioNode {

readonly attribute AudioParam gain;

};

测试连接

audio、html5

HTML5之Audio（二）—— processor调节音量

2014年2月22日 chen

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Audio</title>
</head>
<body>
    <input type="range" min="0" max="200" id="volume" />
    <script>
        var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性
            context = new AudioContext, // 创建Audio上下文
            audio = new Audio( '茜拉 - 想你的夜.mp3' ),
            media = context.createMediaElementSource( audio ), // 从元素创建媒体节点
            processor = context.createScriptProcessor( 4096, 1, 1 ) //创建脚本处理节点
            ;
            //连接：media→processor→destination
            media.connect( processor );
            processor.connect( context.destination );

            //处理过程
            processor.onaudioprocess = function( e ) {
                // 过程:
                // input ---> 处理放大音量  ---> output
                var input = e.inputBuffer.getChannelData( 0 );      // 输入数据缓冲区
                var output = e.outputBuffer.getChannelData( 0 );    // 输出数据缓冲区

                // 处理放大音量
                for( var i = 0; i < input.length; i++ ) {
                    output[i] = input[i] * value;
                }
            };

            var value = 0.5;
            // 添加事件，控制音量
            // value值为0-1之间
            volume.onchange = function() {
                value = volume.value / 200;
            };

            audio.play(); //播放
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Audio</title>

</head>

<body>

var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性

context = new AudioContext, // 创建Audio上下文

audio = new Audio( '茜拉 - 想你的夜.mp3' ),

media = context.createMediaElementSource( audio ), // 从元素创建媒体节点

processor = context.createScriptProcessor( 4096, 1, 1 ) //创建脚本处理节点

;

//连接：media→processor→destination

media.connect( processor );

processor.connect( context.destination );

//处理过程

processor.onaudioprocess = function( e ) {

// 过程:

// input ---> 处理放大音量 ---> output

var input = e.inputBuffer.getChannelData( 0 ); // 输入数据缓冲区

var output = e.outputBuffer.getChannelData( 0 ); // 输出数据缓冲区

// 处理放大音量

for( var i = 0; i < input.length; i++ ) {

output[i] = input[i] * value;

}

};

var value = 0.5;

// 添加事件，控制音量

// value值为0-1之间

volume.onchange = function() {

value = volume.value / 200;

};

audio.play(); //播放

</script>

</body>

</html>

//
ScriptProcessorNode createScriptProcessor(optional unsigned long bufferSize = 0,
                                              optional unsigned long numberOfInputChannels = 2,
                                              optional unsigned long numberOfOutputChannels = 2);

ScriptProcessorNode createScriptProcessor(optional unsigned long bufferSize = 0,

optional unsigned long numberOfInputChannels = 2,

optional unsigned long numberOfOutputChannels = 2);

//
// onaudioprocess
interface AudioProcessingEvent : Event {

    readonly attribute double playbackTime;
    readonly attribute AudioBuffer inputBuffer;
    readonly attribute AudioBuffer outputBuffer;

};

// onaudioprocess

interface AudioProcessingEvent : Event {

readonly attribute double playbackTime;

readonly attribute AudioBuffer inputBuffer;

readonly attribute AudioBuffer outputBuffer;

};

//
// inputBuffer/outputBuffer
interface AudioBuffer {

    readonly attribute float sampleRate;
    readonly attribute long length;

    // in seconds 
    readonly attribute double duration;

    readonly attribute long numberOfChannels;

    Float32Array getChannelData(unsigned long channel);

};

// inputBuffer/outputBuffer

interface AudioBuffer {

readonly attribute float sampleRate;

readonly attribute long length;

// in seconds

readonly attribute double duration;

readonly attribute long numberOfChannels;

Float32Array getChannelData(unsigned long channel);

};

测试连接

audio、html5

HTML5之Audio（一）——让你音乐播放起来

2014年2月22日 chen

//
var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性
    context = new AudioContext, // 创建Audio上下文
    audio = new Audio( '茜拉 - 想你的夜.mp3' ),
    media = context.createMediaElementSource( audio ) // 从元素创建媒体节点
    ;
media.connect( context.destination );
audio.play(); //播放

var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性

context = new AudioContext, // 创建Audio上下文

audio = new Audio( '茜拉 - 想你的夜.mp3' ),

media = context.createMediaElementSource( audio ) // 从元素创建媒体节点

;

media.connect( context.destination );

audio.play(); //播放

// 
// 什么是AudioContext？
// 引用自https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioContext-section

4.1. The AudioContext Interface

This interface represents a set of AudioNode objects and their connections. It allows for arbitrary routing of signals to the AudioDestinationNode (what the user ultimately hears). Nodes are created from the context and are then connected together. In most use cases, only a single AudioContext is used per document.

大致意思为：
AudioContext接口表示一组AudioNode对象和它们的连接。它允许任意信号路由到AudioDestinationNode。节点从上下文中创建，然后被连接在一起。在大多数使用情况下，每个文档只有一个AudioContext。

// 什么是AudioContext？

// 引用自https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioContext-section

4.1. The AudioContext Interface

This interface represents a set of AudioNode objects and their connections. It allows for arbitrary routing of signals to the AudioDestinationNode (what the user ultimately hears). Nodes are created from the context and are then connected together. In most use cases, only a single AudioContext is used per document.

大致意思为：

AudioContext接口表示一组AudioNode对象和它们的连接。它允许任意信号路由到AudioDestinationNode。节点从上下文中创建，然后被连接在一起。在大多数使用情况下，每个文档只有一个AudioContext。

MediaElementAudioSourceNode createMediaElementSource(HTMLMediaElement mediaElement);

createMediaElementSource 放入一个多媒体HTML标签，返回一个多媒体音频资源节点

MediaElementAudioSourceNode createMediaElementSource(HTMLMediaElement mediaElement);

createMediaElementSource 放入一个多媒体HTML标签，返回一个多媒体音频资源节点

测试连接

参考:https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioContext-section

老陈是一个普通的文艺二逼青年

月度归档：2014年02月

HTML5之Canvas（二）——画曲线quadraticCurveTo、bezierCurveTo

HTML5之Canvas（二）——画曲线arc、arcTo

HTML5之Canvas（一）——画起来

HTML5之Audio（七）—— processor绘制波形图

HTML5之Audio（六）—— 3D音效

HTML5之Audio（五）—— 声音过滤

HTML5之Audio（四）—— 左右声道

HTML5之Audio（三）—— gain调节音量

HTML5之Audio（二）—— processor调节音量

HTML5之Audio（一）——让你音乐播放起来

For The Dream