span{
      cursor: pointer;
    }
    .audio_list{
      margin-top: 10px;
    }
    .audio_list audio{
      margin-right: 40px;
      position: relative;
    }
    audio span{
      color: red;
      position: absolute;
      top: 0;
      bottom: 0;
      right: -10px;
    }

 <div>
    <span onclick="start()">開始錄音</span>
    <span onclick="stop()">結(jié)束錄音</span>
    <div class="audio_list">

    </div>
  </div>

  <script>
    const constraints = { audio: true };
    var mediaRecorder = null;
    function start ( ) {
      if(mediaRecorder){
        stop();
        return;
      }
      var chunks = [];
      console.log("start")
       navigator.mediaDevices.getUserMedia(constraints)
      .then(stream => {
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.addEventListener('dataavailable', event => {
          chunks.push(event.data);
        });

        mediaRecorder.addEventListener('stop', () => {
          const blob = new Blob(chunks, { type: 'audio/wav' });
          const url = URL.createObjectURL(blob);
          console.log(blob, url)
          const link = document.createElement('a');

          link.href = url;
          link.download = 'recording.wav';
          document.body.appendChild(link);
          link.click();
           // 在頁面上創(chuàng)建一個音頻元素，并設(shè)置其源為錄音URL
        var audioElement = document.createElement('audio');
        var audio_list = document.querySelector('.audio_list');
        audio_list.innerHTML = ""
        audioElement.src = url;
        audioElement.controls = true;
        audio_list.appendChild(audioElement);
        });
        mediaRecorder.start();
      })
      .catch(err => {
        console.error(err);
      });
    }
    function stop ( ) {
      mediaRecorder.stop();  
      mediaRecorder = null;
      console.log("stop" ,mediaRecorder)
    }
  </script>