2014年2月 – 老陈是一个普通的文艺二逼青年

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

2014年2月23日 chen canvas, html5

<!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>

测试连接

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

2014年2月23日2014年2月23日 chen canvas, html5

<!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:// […]

HTML5之Canvas（一）——画起来

2014年2月23日2014年2月23日 chen canvas, html5

<!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>

[crayon-5ed77d255173c3 […]

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

2014年2月23日 chen audio, html5

<!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>

测试连接

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

2014年2月23日2014年2月23日 chen audio, html5

<!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>

[crayon-5ed77d2 […]

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

2014年2月23日 chen audio, html5

<!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>

[crayon-5ed77d2 […]

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

2014年2月23日2014年5月31日 chen audio, html5

<!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>

[crayon-5ed77d2 […]

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

2014年2月23日2014年2月23日 chen audio, html5

<!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>

[crayon-5ed77d2 […]

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

2014年2月22日2014年2月22日 chen audio, html5

<!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>

[crayon-5ed77d2552a6f9 […]

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

2014年2月22日2014年2月22日 chen audio, html5

//
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(); //播放

[crayon-5ed77d2 […]