HTML5 音频回放/播放控制器

Playback control with sound spectrum

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var sound = new Audio('http://media.soundcloud.com/stream/BkDZIahFB7ME.mp3');

sound
    .isPlayed = false
    .volume = 1;

$('#butt').on('click', function() {
    if (!sound.isPlayed) {
        sound.play(); // Play sound
        $(this)
            .removeClass('btn-succes glyphicon-play')
            .addClass('btn-danger glyphicon-pause');
    } else {
        sound.pause(); // Pause sound
        $(this)
            .removeClass('btn-danger glyphicon-pause')
            .addClass('btn-success glyphicon-play');
    }
    sound.isPlayed = !sound.isPlayed;
});

$('#vol-value').css({
    'width': sound.volume * 100 + "%"
});
$('#vol-dec').on('click', function() {
    sound.volume -= 0.05;
    $('#vol-value').css({
        'width': sound.volume * 100 + "%"
    });
});

$('#vol-inc').on('click', function() {
    sound.volume += 0.05;
    $('#vol-value').css({
        'width': sound.volume * 100 + "%"
    });
});

var audioElement = sound;
audioElement.addEventListener('play', draw);

var context = new AudioContext(),
    analyser = context.createAnalyser(),
    source,
    bars = [];

window.onload = function() {
    source = context.createMediaElementSource(audioElement);

source.connect(analyser);
    analyser.connect(context.destination);

prepareElements();
};

function prepareElements() {
    var el = document.getElementById("spectrum"),
        width = 20;

for (var i = 0; i < 50; i++) {
        var bar = document.createElement("div");
        bar.style.left = (width + 5) * i + "px";
        el.appendChild(bar);
        bars.push(bar);
    }
}

function draw() {
    requestAnimationFrame(draw);

var freqData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(freqData);

for (var i = 0; i < bars.length; i++) {
        var freq = Math.round(i * freqData.length / bars.length);
        bars[i].style.height = freqData[freq] + "px";
    }
}

编译

CSS

html,
body {
    height: 100%;
}
.conatiner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#spectrum {
    position: absolute;
    background-color: #222;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
#spectrum * {
    position: absolute;
    bottom: 0;
    width: 20px;
    background-color: #90ee90;
}
.wrap {
    width: 200px;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.volume-control-panel {
    display: block;
    width: 200px;
    margin: 0 auto;
    margin-bottom: 10px;
    zoom: 1;
}
.volume-control-panel:before,
.volume-control-panel:after {
    content: "";
    display: table;
}
.volume-control-panel:after {
    clear: both;
}
.volume-btn {
    display: block;
    width: 20%;
    top: 0;
    height: 30px;
    color: #08f;
    background-color: #fff;
    border: 1px solid #08f;
    outline: none;
}
.volume-btn-minus {
    float: left;
    border-right: none;
}
.volume-btn-plus {
    float: right;
    border-left: none;
}
.volume-bar {
    width: 60%;
    height: 30px;
    border: 1px solid #08f;
    margin: 0 auto;
    position: relative;
}
.volume-value {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #08f;
}
.btn-xlg {
    display: block;
    width: 200px;
    height: 100px;
    font-size: 32px;
}

HTML

Playback control with sound spectrum

编辑器支持Emmet

快捷键

Playback control with sound spectrum

HTML5 Web音频应用程序接口（Web Audio API）实例：参数均衡器

HTML5 Web音频应用程序接口（Web Audio API）实例：在线演奏木琴

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：