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))

html录制mp3的更多相关文章

  1. html5 录制mp3音频，支持采样率和比特率设置

    13年的时候做过html5录音,一个问题是保存的wav格式文件很大,当初用了一个迂回的方式,上传到服务器后调用 lame 编码器转换,但由于文件大,上传较慢.不得不说,前端技术发展真是日新月异,有人实 ...

  2. Android || IOS录制mp3语音文件方法

    Android Android Supported Media Formats : http://developer.android.com/guide/appendix/media-formats. ...

  3. Cocos2d-x项目移植到WP8系列之五：播放MP3

    原文链接: http://www.cnblogs.com/zouzf/p/3972549.html 这一块的细节还是不太了解,只是东凑西拼能跑起来而已 1.网上下载lamb库 生成需要的lib库,详情 ...

  4. Unity3D移植Windows Universal App（Windows 8.1 及Windows Phone 8.1）版本遇到的坑

    移植的情况以及遇到的问题: 1.选用的版本是最新的Unity5.0. 2.全屏播放视频Handheld.PlayFullScreenMoview的路径必须是全路径,并且前面要加上"ms-ap ...

  5. iOS运营级B2B服务平台App、自定义图标库、个人中心页面、识别身份证Demo、瀑布流等源码

    iOS精选源码 简单的个人中心页面-自定义导航栏并予以渐变动画 一个近乎完整的可识别中国身份证信息的Demo 可自动快速... iOS可自定义图表库 - PNChart 开源一款曾是运营级的B2B服务 ...

  6. swift 录制多个音频 并将音频转换为mp3 并合成多个mp3文件为一个文件

    我的需求是可以录制多个文件,最后生成的文件格式为mp3形式,查了下各种资料,因为swift无法直接将音频录制为mp3格式,所以最后我采取的解决方案为先将每个单独的文件转为mp3,最后逐一合并形成一个m ...

  7. iOS 通过(lame)将录制音频转换成Mp3

    版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明出处,保留原帖地址及作者署名. Url:http://blog.csdn.net/ysy441088327/article/detail ...

  8. iOS开发 解决使用AVAudioRecorder录制后转mp3解决音量小的问题

    使用AVAudioRecorder录音后使用avplayer播放声音小,录音完后转成mp3格式的音频声音也小!!! 老板要求最基本的是不用把手机放到耳边听! 在StackOverFlow上查了一下,加 ...

  9. mac上录制无声mp3

    想要录制音频很多方法,要无声音频 你可以使用调试软件 那么mac的录制音频,可以用这个软件 将耳机插头插在话筒插孔内,录制出来了m4a文件, 进入转换网站 开始转换下载

  10. Android上使用MP3格式录制声音

    0. 下载LAME 并解压缩 http://lame.sourceforge.net/download.php http://sourceforge.net/projects/lame/files/l ...

随机推荐

  1. pytorch入门 - 修改huggingface大模型配置参数

    介绍 Hugging Face的Transformers库提供了大量预训练模型,但有时我们需要修改这些模型的默认参数来适应特定任务. 本文将详细介绍如何修改BERT模型的最大序列长度(max_posi ...

  2. SpringBoot集成openGauss

    1.pom依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId& ...

  3. MATLAB 打开报错：错误使用eval，未定义与‘struct‘类型的输入参数相对应的函数‘workspacefunc‘（MAC OS情况下）

    MAC OS情况下遇到这个问题比win会麻烦一点点 第一步:在Matlab中打开文件夹 打开文件夹/Volumes/自己的安装位置/MATLAB_R2022b.app/toolbox/local 第二 ...

  4. AEM 与 ActiveMQ 集成方案详解

    Adobe Experience Manager (AEM) 与 ActiveMQ 的集成可实现系统间的解耦和异步通信,以下是详细的集成步骤与代码实现: 一.环境准备 AEM 环境:AEM 6.5+ ...

  5. 查看Linux配置信息

    cat gitlab.rb |grep -v "^[#,;]" |grep -v "^$"

  6. LingYanAutoUpdateServer：面向 WPF / WinForm / MAUI 自动更新组件开源发布，轻松实现一键升级

    LingYanAutoUpdateServer:为 WPF.WinForms.MAUI 等桌面应用打造的轻量级自动更新开源解决方案 你是否正在开发一个 WPF.WinForms 或 .NET MAUI ...

  7. [Ynoi2016] 炸脖龙 I

    题目传送门 已经能过 hack,原因:做快速幂的时候需要微判一下边界.很好奇 lxl 为什么不卡 显然区间加可用线段树做. 然后操作二用扩展欧拉定理,每个 \(p\) 最多递归 \(\log\) 层, ...

  8. java--集合List、ArrayList、Linkedlist的应用

    Collection 迭代器的作用 迭代器的作用:就是用于抓取集合中的元素. 迭代的方法:toArray() .iterator() 迭代器的方法(一共就这3个): hasNext() 问是否有元素可 ...

  9. android多活动练习--人品计算器

    效果图如下: 第二个页面: 显示结果和姓名.性别有关,代码如下: activity_main.xml: 1 <?xml version="1.0" encoding=&quo ...

  10. Luogu P9671 [ICPC2022 Jinan R] Identical Parity 题解

    P9671 [ICPC2022 Jinan R] Identical Parity 构造题.感觉中上位黄. 对于 \(k\) 为偶数的情况,构造奇偶交替的序列.每次区间向后挪动时,最左边出去的元素和最 ...