使用Web Audio和Canvas实现自动音频播放

[Autoplaying Audio] Playing with Web Audio & Canvas 请在移动触摸屏模拟环境中测试本例。

音频

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3724
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Cross-Browser check for the Web Audio API

var AudioContext = window.AudioContext || window.webkitAudioContext;

// shim layer with setTimeout fallback
window.requestAnimFrame = (function() {
    'use strict';

return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

document.addEventListener('DOMContentLoaded', function() {
    'use strict';

var space = document.getElementById('space');

var shakeItBuffer = null;

var analyzer;
    var bufferLength;
    var dataArray;

var animateVisual = null;

var canvas = document.getElementById('soundBar');
    var drawCtx = canvas.getContext('2d');

var WIDTH = space.getBoundingClientRect().width;
    var HEIGHT = 100;

canvas.width = WIDTH;
    canvas.height = HEIGHT;

function animate() {
        animateVisual = requestAnimFrame(animate);

analyzer.getByteTimeDomainData(dataArray);

drawCtx.fillStyle = '#ecdfc8';
        drawCtx.fillRect(0, 0, WIDTH, 100);

drawCtx.lineWidth = 6;
        drawCtx.strokeStyle = '#093c4f';

drawCtx.beginPath();

var sliceWidth = WIDTH * 0.8 / bufferLength;
        var x = 0;
        var y;

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

var v = dataArray[i] / 80.0;
            y = v * HEIGHT / 3;

if (i === 0) {
                drawCtx.moveTo(x, 53);
                x = WIDTH / 9;
            } else {
                drawCtx.lineTo(x, y);
            }

x += sliceWidth;
        }

drawCtx.lineTo(canvas.width, 53);
        drawCtx.stroke();
    }

var fbRAF = null;

function fallBack() {
        var audioEl = document.createElement('audio');
        audioEl.src = 'BYC.mp3';

modal.appendChild(audioEl);

audioEl.addEventListener('canplaythrough', function() {
            audioEl.play();

fbAnim();
        });

audioEl.addEventListener('ended', function() {
            window.cancelAnimationFrame(fbRAF);

drawCtx.fillStyle = '#ecdfc8';
            drawCtx.fillRect(0, 0, WIDTH, 100);

drawCtx.lineWidth = 6;
            drawCtx.strokeStyle = '#093c4f';

drawCtx.beginPath();
            drawCtx.moveTo(0, 53);
            drawCtx.lineTo(canvas.width, 53);
            drawCtx.stroke();
        });
    }

function fbAnim() {
        fbRAF = requestAnimFrame(fbAnim);

var len = 140;
        var slice = WIDTH * 0.8 / len;
        var X = 0;

drawCtx.fillStyle = '#ecdfc8';
        drawCtx.fillRect(0, 0, WIDTH, 100);

drawCtx.lineWidth = 6;
        drawCtx.strokeStyle = '#093c4f';

drawCtx.beginPath();
        drawCtx.moveTo(0, 53);

X = WIDTH / 9;

drawCtx.lineTo(X, 53);

for (var f = 0; f < len; f++) {
            var mix = Math.random() < 0.5 ? 1 : -1;
            var Y = getRandomInt(60, 30);

console.log(mix, Y);

drawCtx.lineTo(X, Y);

X += slice;
        }

drawCtx.lineTo(X, 53);
        drawCtx.lineTo(canvas.width, 53);
        drawCtx.stroke();
    }

function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }

function playSound(buffer) {
        analyzer = audio.createAnalyser();
        analyzer.smoothingTimeConstant = 0.8;
        analyzer.fftSize = 2048;

analyzer.connect(audio.destination);

bufferLength = analyzer.frequencyBinCount;
        dataArray = new Uint8Array(bufferLength);

analyzer.getByteTimeDomainData(dataArray);

var src = audio.createBufferSource();

src.buffer = buffer;

src.connect(analyzer);

src.connect(audio.destination);

if ('ontouchstart' in window) {
            space.addEventListener('touchstart', function() {
                src.connect(audio.destination);

src.start(0);

});

animate();
        } else {
            src.start(0);

animate();
        }
    }

function loadShakeItSound(url) {
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.responseType = 'arraybuffer';

// Decode asynchronously
        request.onload = function() {
            audio.decodeAudioData(request.response, function(buffer) {
                shakeItBuffer = buffer;

playSound(shakeItBuffer);
            }, function(err) {
                console.log('Error loading sound: ', err);
            });
        };
        request.send();
    }

if (!!AudioContext) {
        var audio = new AudioContext();
        loadShakeItSound('/uploads/160201/ShakeItOff.m4r');
    } else {
        fallBack();
        return;
    }

}, false);

编译

CSS

HTML

[Autoplaying Audio] Playing with Web Audio & Canvas 请在移动触摸屏模拟环境中测试本例。

音频

编辑器支持Emmet

快捷键

[Autoplaying Audio] Playing with Web Audio & Canvas 请在移动触摸屏模拟环境中测试本例。

音频

和音频同步的图片轮播幻灯片

HTML5 动物声音儿童教学动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：