原生js实现带麦克风选择及声音视觉效果的录音成wav文件下载代码-html代码-BFW代码库

原生js实现带麦克风选择及声音视觉效果的录音成wav文件下载代码

代码语言：html

所属分类：多媒体

代码描述：原生js实现带麦克风选择及声音视觉效果的录音成wav文件下载代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        #msg {
          visibility: hidden;
          color: red;
          font-weight: bold;
          font-size: 22px;
          font-family: Verdana;
        }
        button {
          padding: 5px 10px;
          border: 1px solid grey;
          font-size: 18px;
          background: white;
        }
        
        .audio-controls {
          display: flex;
          align-items: center;
          padding-top: 20px;
          justify-content: center;
        }
        .audio-controls button {
          margin: 0px 5px;
        }
        canvas {
          margin-top: 10px;
          background-color: black;
        }
        select {
          height: 25px;
          margin: 0px 5px;
        }
        a {
          margin-left: 20px;
        }
        .app {
          text-align: center;
          padding-top: 20px;
        }
    </style>



</head>

<body>
    <div class="app">
        <select name="" id="micSelect"></select>

        <select id="visSelect">
    <option value="frequencybars">Bar</option>
    <option value="sinewave">Wave</option>
    <option value="circle">Circle</option>
  </select>

        <a id="download">Download</a>

        <div class="audio-controls">
            <button id="record">Record</button>
            <button id="stop">Stop</button>
            <audio id="audio" controls></audio>
        </div>

        <div id="msg">Recording...</div>
        <canvas width="500" height="300"></canvas>
        <div>

            <script>
                (async () => {
                  let leftchannel = [];
                  let rightchannel = [];
                  let recorder = null;
                  let recording = false;
                  let recordingLength = 0;
                  let volume = null;
                  let audioInput = null;
                  let sampleRate = null;
                  let AudioContext = window.AudioContext || window.webkitAudioContext;
                  let context = null;
                  let analyser = null;
                  let canvas = document.querySelector('canvas');
                  let canvasCtx = canvas.getContext("2d");
                  let visualSelect = document.querySelector('#visSelect');
                  let micSelect = document.querySelector('#micSelect');
                  let stream = null;
                  let tested = false;
                
                  try {
                    window.stream = stream = await getStream();
                    console.log('Got stream');
                  } catch (err) {
                    alert('Issue getting mic', err);
                  }
   .........完整代码请登录后点击上方下载按钮下载查看