jquery+recorder实现带麦克风音量检测的网页录音机及录音文件下载代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：jquery+recorder实现带麦克风音量检测的网页录音机及录音文件下载代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/recorder.1.0.4.js"></script>
    <style>
        .voluemImg {
        background: url(//repo.bfw.wiki/bfwrepo/image/614e833d56d1e.png) no-repeat center center;
    }
    </style>
    <script>
        var microphone = (function() {
    function isIE() {
        return !!window.ActiveXObject || 'ActiveXObject' in window ? true : false
    }
    var _volume = function(id, vol) {
        var volID = document.getElementById(id);
        volID.innerHTML = '<div style="width: 120px;height: 120px;border-radius: 60px;background: #fff;border:#daf3fc 1px solid;position: relative;">' +
            '<span style="display: block;width: 30px;height: 65px;position: absolute;left: 9px;top:26px;">' +
            '<span style="display: block;position:relative;width: 30px;height: 32px;margin-bottom: 1px;">' +
            '<i style="display: block;position: absolute;left: 0;bottom: 0;width: 2px;background: #c5f0ff;height:' + 11 * vol / 100 + 'px;opacity:' + (vol / 100 - 0.4) + '"></i>' +
            '<i style="display: block;position: absolute;left: 4px;bottom: 0;width: 2px;background: #c5f0ff;height:' + 14 * vol / 100 + 'px;opacity:' + (vol / 100 - 0.2) + '"></i>' +
            '<i style="display: block;position: absolute;left: 8px;bottom: 0;width: 2px;background: #c5f0ff;height:' + 17 * vol / 100 + 'px;opacity:' + (vol / 100 + 0) + '"></i>' +
            '<i style="display: block;position: absolute;left: 12px;bottom: 0;width: 2px;background: #c5f0ff;height:' + 20 * vol / 100 + 'px;opacity:' + (vol / 100 + 0.2) + '"></i>' +
            '<i style="display: block;position: absolute;left: 16px;bottom: 0;width: 2px;background: #c5f0ff;height:' + 23 * vol / 100 + 'px;opacity:' + (vol / 100 + 0.4) + '"></i>' +
            '<i style="display: block;position: absolute;left: 20px;bottom: 0;width: 2px;background: #c5f0ff;height:' + 26 * vol / 100 + 'px;opacity:' + (vol / 100 + 0.6) + '"></i>' +
            '<i style="display: block;position: absolute;left: 24px;bottom: 0;width: 2px;background: #c5f0ff;height:' + 29 * vol / 100 + 'px;opacity:' + (vol / 100 + 0.8) + '"></i>' +
            '<i style="display: block;position: absolute;left: 28px;bottom: 0;width: 2px;background: #c5f0ff;height:' + 32 * vol / 100 + 'px;opacity:' + (vol / 100 + 1) + '"></i>' +
            '</span>' +
            '<span style="display: block;position:relative;width: 30px;height: 32px;">' +
            '<i style="display: block;position: absolute;left: 0;top: 0;width: 2px;background: #c5f0ff;height:' + 11 * vol / 100 + 'px;opacity:' + (vol / 100 - 0.4) + '"></i>' +
            '<i style="display: block;position: absolute;left: 4px;top: 0;width: 2px;background: #c5f0ff;height:' + 14 * vol / 100 + 'px;opacity:' + (vol / 100 - 0.2) + '"></i>' +
            '<i style="display: block;position: absolute;left: 8px;top: 0;width: 2px;background: #c5f0ff;height:' + 17 * vol / 100 + 'px;opacity:' + (vol / 100 + 0) + '"></i>' +
            '<i style="display: block;position: absolute;left: 12px;top: 0;width: 2px;background: #c5f0ff;height:' + 20 * vol / 100 + 'px;opacity:' + (vol / 100 + 0.2) + '"></i>' +
            '<i style="display: block;position: absolute;left: 16px;top: 0;width: 2px;background: #c5f0ff;height:' + 23 * vol / 100 + 'px;opacity:' + (vol / 100 + 0.4) + '"></i>' +
            '<i style="display: block;position: absolute;left: 20px;top: 0;width: 2px;background: #c5f0ff;height:' + 26 * vol / 100 + 'px;opacity:' + (vol / 100 + 0.6) + '"></i>' +
            '<i style="display: block;position: absolute;left: 24px;top: 0;width: 2px;background: #c5f0ff;height:' + 29 * vol / 100 + 'px;opacity:' + (vol / 100 + 0.8) + '"></i>' +
            '<i style="display: block;position: absolute;left: 28px;top: 0;width: 2px;background: #c5f0ff;height:' + 32 * vol / 100 + 'px;opacity:' + (vol / 100 + 1) + '"></i>' +
            '</span>' +
            '</span>' +
            '<span style="display:block;margin:31px auto;width: 36px;height: 58px;" class="voluemImg"></span>' +
            '<span style="display: block;width: 30px;height: 65px;position: absolute;right: 9px;top:26px;">' +
            '<span style="display: block;position:relative;width: 30px;height: 32px;margin-bottom: 1px;">' +
            '<i style="display: block;position: absolute;left: 0;bottom: 0;width: 2px;background: #c5f0ff;height:' + 32 * vol / 100 + 'px;opacity:' + (vol / 100 + 1) + '"></i>' +
            '<i style="display: block;position: absolute;left: 4px;bottom: 0;width: 2px;background: #c5f0ff;height:' + 29 * vol / 100 + 'px;opacity:' + (vol / 100 + 0.8) + '"></i>' +
            '<i style="display: block;position: absolute;left: 8px;bottom: 0;width: 2px;background: #c5f0ff;height:' + 26 * vol / 100 + 'px;opacity:' + (vol / 100 + 0.6) + '"></i>' +
            '<i style="display: block;position: absolute;left: 12px;bottom: 0;width: 2px;background: #c5f0ff;height:' + 23 * vol / 100 + 'px;opacity:' + (vol / 100 + 0.4) + '"></i>' +
            '<i style="display: block;position: absolute;left: 16px;bottom: 0;width: 2px;background: #c5f0ff;height:' + 20 * vol .........完整代码请登录后点击上方下载按钮下载查看