Skip to content
@sound-buttons

Sound Buttons

This project builds a Vtuber voice button website with an online audio submission system. Users can generate buttons by clipping YouTube audio via a form.

icon Sound Buttons - 聲音按鈕

open graph

此專案是一個 Vtuber 聲音按鈕網站的實作。
This project is a implementation of the Vtuber voice button website.

https://sound-buttons.click

專案特色在於線上的音檔投稿系統,提交表單後能自動剪輯 Youtube 音訊並生成按鈕。
採用了資料分離式架構設計,使增修內容只需撰寫 JSON 設定檔即可。

前端使用 Angular,後端則採用 Azure Functions,音檔存放於 Azure Blob Storage。


The project features an online audio submission system, which automatically clips YouTube audio and generates buttons after submitting the upload form.
It adopts a data separation architecture design, allowing content updates to be made by simply writing JSON configuration files.

Angular is used for the front-end, while Azure Functions are used for the back-end. The audio files are stored and hosted on Azure Blob Storage.

Youtube Azure Blob Storage Angular Azure Functions

Related Repos

Frontend (Angular) https://github.com/sound-buttons/sound-buttons CodeQL
Data (JSON) https://github.com/sound-buttons/sound-buttons_configs
Backend (Azure Function) https://github.com/sound-buttons/sound-buttons_upload-backend CodeQL
Click counter (Cloudflare Worker) https://github.com/sound-buttons/worker-click-counter CodeQL

Preview

Home page

1

Buttons page, Table of contents, Audio control

main

Expandable introduction block

2

Typeahead Search bar

search

Upload form

3

i18n (Chinese, Japanese)

upload2

Blog post introduction

https://blog.maki0419.com/2021/05/soundbuttons.html

License

Code

open graph

GNU AFFERO GENERAL PUBLIC LICENSE Version 3

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License along with this program. If not, see https://www.gnu.org/licenses/.

Sound and Character Pictures

The original artists hold the copyrights to all the sounds and character pictures. We have utilized them in accordance with their Derivative Works Guidelines (Secondary Creation Guidelines).

In case you wish to remove your data through a DMCA Takedown, kindly report it here.

Pinned

  1. sound-buttons sound-buttons Public

    This project builds a Vtuber voice button website with an online audio submission system. Users can generate buttons by clipping YouTube audio via a form. (Angular2)

    TypeScript 11 2

  2. sound-buttons_upload-backend sound-buttons_upload-backend Public

    一個 Vtuber 聲音按鈕網站實作之音檔投稿系統後端,提交表單後能自動剪輯 Youtube 音訊並生成按鈕。以 Azure Functions 實作,上傳音檔並更新 JSON 設定檔至 Azure Blob Storage。 (Azure Functions)

    C# 1

  3. sound-buttons_configs sound-buttons_configs Public

    sound-buttons 專案的 submodule,存放該專案的實際資料內容。Git submodule of "Sound Buttons" project. (JSON)

    2 4

  4. worker-click-counter worker-click-counter Public

    Forked from jim60105/worker-view-counter-badge

    A counter implemented using Cloudflare Workers Edge storage solution (Cloudflare Worker)

    TypeScript 1

Repositories

Showing 6 of 6 repositories
  • sound-buttons Public

    This project builds a Vtuber voice button website with an online audio submission system. Users can generate buttons by clipping YouTube audio via a form. (Angular2)

    TypeScript 11 AGPL-3.0 2 0 0 Updated Apr 16, 2024
  • sound-buttons_configs Public

    sound-buttons 專案的 submodule,存放該專案的實際資料內容。Git submodule of "Sound Buttons" project. (JSON)

    2 AGPL-3.0 4 0 0 Updated Apr 9, 2024
  • sound-buttons_upload-backend Public

    一個 Vtuber 聲音按鈕網站實作之音檔投稿系統後端,提交表單後能自動剪輯 Youtube 音訊並生成按鈕。以 Azure Functions 實作,上傳音檔並更新 JSON 設定檔至 Azure Blob Storage。 (Azure Functions)

    C# 1 AGPL-3.0 0 0 0 Updated Mar 31, 2024
  • worker-click-counter Public Forked from jim60105/worker-view-counter-badge

    A counter implemented using Cloudflare Workers Edge storage solution (Cloudflare Worker)

    TypeScript 1 AGPL-3.0 5 0 0 Updated Jan 3, 2024
  • .github Public
    0 AGPL-3.0 0 0 0 Updated Nov 25, 2023
  • docker-sound-dl Public archive

    Vtuber按鈕網站的Blob Storage音檔更新程式。以.NET Core實作,下載Youtube頻道所有音檔後寫入Azure Blob Storage。(.NET Core in Docker)

    C# 1 MIT 0 0 0 Updated Oct 13, 2022

Top languages

Loading…

Most used topics

Loading…