本專案以「模板（Template）」形式提供，使用者可依需求自由修改與擴充。
This project is provided as a "Template", allowing users to freely modify and extend it according to their needs.
- 點擊 GitHub 上的 Use this template 或 Fork 本專案
- 依需求修改內容與樣式
- 部署至你偏好的平台（Vercel、Netlify、GitHub Pages 等）
若情況允許，建議在使用本模板前聯絡 孤之界，
簡要告知將使用本模板，以及預計製作之網站對象。
此舉僅作為作者了解使用情況之參考，
不構成授權條件，亦不影響 Apache License 2.0 所賦予之權利。
這是一個基於 Nuxt 3 和 Vuetify 製作的 VTuber 語音按鈕網站模板。用戶可以點擊按鈕播放各種預錄的語音片段，支援分類瀏覽、搜尋、分享等功能。
本專案目前作為「玖玖巴按鈕」使用，但可以輕鬆修改為其他 VTuber 或內容創作者的語音按鈕網站。
- 語音播放系統：點擊按鈕播放音效，支援播放進度顯示、暫停、循環播放、隨機播放
- 分類管理：語音按分組整理，使用展開式面板呈現
- 即時搜尋：快速搜尋語音內容
- 新音效標記：7 天內新增的音效會自動標記為「新」
- 分享功能：生成音效分享連結，可複製到剪貼簿
- 響應式設計：適配桌面與行動裝置
- 底部控制欄：顯示目前播放的音效，提供快速控制
| 類別 | 技術 |
|---|---|
| 框架 | Nuxt 3 + Vue 3 |
| UI 組件庫 | Vuetify 3 |
| CSS 框架 | Tailwind CSS |
| 套件管理 | Bun |
| 語言 | TypeScript |
| 其他 | VueUse、Day.js、Twemoji |
├── assets/
│ ├── css/ # 樣式檔案
│ ├── locales/ # 網站設定 (site.json)
│ ├── links.ts # 外部連結設定
│ └── voices.json # 語音資料設定
├── pages/
│ ├── index.vue # 首頁（主要按鈕頁面）
│ └── about.vue # 關於頁面
├── public/
│ └── voices/ # 音效檔案存放目錄
├── app.vue # 根組件
├── nuxt.config.ts # Nuxt 設定
├── theme.json # 主題顏色設定
└── vuetify.config.ts # Vuetify 設定
bun install啟動開發伺服器於 http://localhost:3333：
bun run devbun run buildbun run previewbun run generate編輯 assets/locales/site.json：
{
"title": "【你的按鈕網站名稱】",
"description": "網站描述",
"url": "https://your-domain.com",
"theme_color": "#f18465"
}編輯 assets/voices.json，並將音效檔案放入 public/voices/ 對應的資料夾：
{
"groups": [
{
"name": "group_name",
"description": { "zh": "分組名稱" },
"sounds": [
{
"name": "sound_id",
"path": "group_name/filename.mp3",
"description": { "zh": "語音描述" },
"updated_at": 1700000000
}
]
}
]
}編輯 theme.json 來自訂網站配色。
本專案由以下成員共同設計、開發並維護：
相關歸屬資訊請參閱 NOTICE。
本專案採用 Apache License 2.0 授權。
你可以：
- 使用本專案（包含商業用途）
- 修改原始碼
- 再散布原始碼或修改後版本
但你必須遵守以下事項：
- 必須保留原作者署名
- 必須保留
LICENSE與NOTICE檔案 - 若有修改，需清楚標示修改內容
- 不得暗示原作者為你的修改版本背書
詳細條款請參閱 LICENSE。
本專案可能包含第三方開源套件，
各套件均依其各自之授權條款使用。
相關授權資訊請參閱相依套件之官方文件或原始碼中的授權聲明。
本專案為愛好者作品，與相關 VTuber 本人沒有直接關聯。
本專案以「現狀」提供，不附帶任何明示或默示之保證。
使用本專案所產生的任何風險，須由使用者自行承擔。
- Click Use this template on GitHub or Fork this project
- Modify the content and styles according to your needs
- Deploy to your preferred platform (Vercel, Netlify, GitHub Pages, etc.)
If possible, please consider contacting 孤之界 (Kon no Kai) before using this template,
briefly informing them of your intention to use it and the target subject for your website.
This is solely for the author's reference to understand usage,
and does not constitute a licensing requirement, nor does it affect the rights granted under the Apache License 2.0.
This is a VTuber voice button website template built with Nuxt 3 and Vuetify. Users can click buttons to play pre-recorded voice clips, with support for categorized browsing, searching, and sharing.
This project is currently used as "998 Button" (玖玖巴按鈕), but can be easily customized for other VTubers or content creators.
- Audio Playback System: Click to play sounds with progress display, pause, loop, and random play
- Category Management: Voice clips organized in collapsible panels by groups
- Real-time Search: Quickly search through voice content
- New Sound Indicator: Sounds added within 7 days are automatically marked as "New"
- Share Function: Generate shareable links for specific sounds
- Responsive Design: Works on desktop and mobile devices
- Bottom Control Bar: Shows currently playing sound with quick controls
| Category | Technology |
|---|---|
| Framework | Nuxt 3 + Vue 3 |
| UI Library | Vuetify 3 |
| CSS Framework | Tailwind CSS |
| Package Manager | Bun |
| Language | TypeScript |
| Others | VueUse, Day.js, Twemoji |
├── assets/
│ ├── css/ # Stylesheets
│ ├── locales/ # Site configuration (site.json)
│ ├── links.ts # External links configuration
│ └── voices.json # Voice data configuration
├── pages/
│ ├── index.vue # Home page (main button page)
│ └── about.vue # About page
├── public/
│ └── voices/ # Audio files directory
├── app.vue # Root component
├── nuxt.config.ts # Nuxt configuration
├── theme.json # Theme color configuration
└── vuetify.config.ts # Vuetify configuration
bun installStart the development server at http://localhost:3333:
bun run devbun run buildbun run previewbun run generateEdit assets/locales/site.json:
{
"title": "【Your Button Site Name】",
"description": "Site description",
"url": "https://your-domain.com",
"theme_color": "#f18465"
}Edit assets/voices.json and place audio files in the corresponding folder under public/voices/:
{
"groups": [
{
"name": "group_name",
"description": { "zh": "Group Name" },
"sounds": [
{
"name": "sound_id",
"path": "group_name/filename.mp3",
"description": { "zh": "Voice description" },
"updated_at": 1700000000
}
]
}
]
}Edit theme.json to customize the site color scheme.
This project was designed, developed, and maintained by the following members:
For attribution information, please see NOTICE.
This project is licensed under the Apache License 2.0.
You may:
- Use this project (including for commercial purposes)
- Modify the source code
- Redistribute the original or modified versions
However, you must comply with the following:
- You must retain the original author attribution
- You must retain the
LICENSEandNOTICEfiles - If modified, you must clearly indicate the changes
- You may not imply that the original authors endorse your modified version
For full terms, see LICENSE.
This project may include third-party open-source packages,
each used under their respective licenses.
For licensing information, please refer to the official documentation or license declarations in the source code of each dependency.
This project is a fan-made work and is not directly affiliated with the VTuber.
This project is provided "as is", without any express or implied warranties.
Any risks arising from the use of this project are borne by the user.
For more information about Nuxt deployment, check out the deployment documentation.