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

an audio toolkit that enables sound processing and track mixing directly in a browser | 音频处理工具
https://github.com/RylanBot/melody-workshop

wavesurfer web-audio-api

Last synced: 8 months ago
JSON representation

an audio toolkit that enables sound processing and track mixing directly in a browser | 音频处理工具

• Host: GitHub
• URL: https://github.com/RylanBot/melody-workshop
• Owner: RylanBot
• Created: 2024-11-29T09:48:16.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-18T07:27:19.000Z (over 1 year ago)
• Last Synced: 2025-01-18T07:28:58.704Z (over 1 year ago)
• Topics: wavesurfer, web-audio-api
• Language: TypeScript
• Homepage: https://melody-workshop.rylan.cn
• Size: 2.32 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
#  Melody Workshop

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

## 🌷 Preview

[![Live Demo](https://img.shields.io/badge/Live%20Demo-Click%20to%20view-palegreen?style=for-the-badge&logo=vercel)](https://melody-workshop.rylan.cn/)

![Processor](./public/image/processor.png)

![Mixer](./public/image/mixer.png)

## 🔥 Features

### 💕 Single Audio Processing

- [x] Playback range trimming

- [x] Pitch filter application

- [x] Volume and speed adjustment

### 💕 Multiple Audio Mixing

- [x] File add and delete

- [x] Track volume control

### 💕 Audio Exporting

- [x] Format selection

- [x] Bit rate setting

## 🧙🏻 Development

 

If you are familiar with the Web frontend technologies and are interested in source code, you can run this program using the following commands:

```sh

npm install # pnpm install

npm run dev

```

Here is an architecture diagram to help you better understand the entire project:

![Architecture](./public/image/architecture.png)

Additionally, here are some audio-related articles that may be useful to you *(written in Chinese)*:

- [JS Implementation of Changing the Volume of an AudioBuffer and Downloading It as a New File](https://www.zhangxinxu.com/wordpress/2023/10/js-web-audio-audiobuffer-volume/)

- [JS Implementation of Speeding Up Audio without Changing Pitch](https://www.zhangxinxu.com/wordpress/2024/02/js-audioencoder-backplayrate-audiobuffer/)