https://github.com/rylanbot/melody-workshop

🎵 Audio processing and mixing in the browser「音频编辑工具」
https://github.com/rylanbot/melody-workshop

audio-effect web-audio-api

Last synced: about 1 year ago
JSON representation

🎵 Audio processing and mixing in the browser「音频编辑工具」

• Host: GitHub
• URL: https://github.com/rylanbot/melody-workshop
• Owner: RylanBot
• License: mit
• Created: 2024-11-29T09:48:16.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-28T16:55:21.000Z (about 1 year ago)
• Last Synced: 2025-03-28T17:06:06.747Z (about 1 year ago)
• Topics: audio-effect, web-audio-api
• Language: TypeScript
• Homepage: https://melody-workshop.rylan.cn
• Size: 3.28 MB
• Stars: 203
• Watchers: 6
• Forks: 13
• Open Issues: 0
• Metadata Files:
  • Readme: README-CN.md
  • License: LICENSE

Awesome Lists containing this project

README

          
#  Melody Workshop

[English](./README.md) | 简体中文

## 🌷 效果预览

[![在线示例](https://img.shields.io/badge/在线示例-点击查看-palegreen?style=for-the-badge&logo=vercel)](https://melody-workshop.rylan.cn/)

![处理器](./public/image/processor.png)

![混合器](./public/image/mixer.png)

## 🔥 功能介绍

### 💕 单音频处理

- [x] 播放范围剪裁

- [x] 变调滤镜应用

- [x] 音量音速调节

### 💕 多音频混合

- [x] 文件添加删除

- [x] 轨道音量控制

### 💕 音频导出

- [x] 格式选择

- [x] 码率设置

## 🧙🏻 二次开发

 

如果你熟悉 Web 前端技术且对源码感兴趣，可以根据以下命令，在本地启动这个程序：

```sh

npm install # pnpm install

npm run dev

```

这里有一份架构图方便你更好理解整个项目：

![架构](./public/image/architecture.png)

以及一些也许对你有用的音频知识文章：

- [JS改变AudioBuffer音量并下载为新audio音频](https://www.zhangxinxu.com/wordpress/2023/10/js-web-audio-audiobuffer-volume/)

- [不改变音调情况下Audio音频的倍速合成JS实现](https://www.zhangxinxu.com/wordpress/2024/02/js-audioencoder-backplayrate-audiobuffer/)