html录制mp3

wavesurfer.js | audio waveform player JavaScript library

 

 

要将weba文件转换为mp3格式，您可以使用HTML5的音频API来实现。以下是一个简单的示例代码：

```html
<!DOCTYPE html>
<html>
<head>
  <title>WebA to MP3 Converter</title>
</head>
<body>
  <input type="file" id="webaFileInput" accept="audio/webm, audio/webm;codecs=opus">
  <button id="convertButton">Convert to MP3</button>
  <a id="downloadLink" download="converted.mp3">Download MP3</a>

  <script>
    document.getElementById('convertButton').addEventListener('click', function() {
      var webaFileInput = document.getElementById('webaFileInput');
      var webaFile = webaFileInput.files[0];
      var audio = new Audio();
      audio.src = URL.createObjectURL(webaFile);
      audio.controls = true;
      audio.play();

      var context = new AudioContext();
      var source = context.createMediaElementSource(audio);
      var destination = context.createMediaStreamDestination();
      source.connect(destination);

      var recorder = new MediaRecorder(destination.stream);
      var chunks = [];
      recorder.ondataavailable = function(e) {
        chunks.push(e.data);
      };
      recorder.onstop = function(e) {
        var blob = new Blob(chunks, { 'type' : 'audio/mp3' });
        var url = URL.createObjectURL(blob);
        var downloadLink = document.getElementById('downloadLink');
        downloadLink.href = url;
        downloadLink.click();
      };

      recorder.start();
      audio.onended = function() {
        recorder.stop();
      };
    });
  </script>
</body>
</html>
```

在这个示例中，我们首先创建一个input元素，允许用户选择weba文件。然后，我们创建一个按钮，当用户点击按钮时，我们将weba文件转换为mp3格式并提供下载链接。我们使用HTML5的音频API来实现这一转换过程。

　　一个时尽量只用WaveSurfer。如果不行，就配合上面第一个里的：lame.min.js

大笨熊:
  record = wavesurfer.registerPlugin(RecordPlugin.create({ scrollingWaveform, renderRecordedAudio: false,mimeType:'audio/webm' }))

大笨熊:
https://github.com/katspaugh/wavesurfer.js/blob/e9cd82c/src/plugins/record.ts#L7

大笨熊:
const MIME_TYPES = ['audio/webm', 'audio/wav', 'audio/mpeg', 'audio/mp4', 'audio/mp3']
const findSupportedMimeType = () => MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType))

posted @ 2023-12-05 10:28  China Soft  阅读(195)  评论(0)    收藏  举报