├── .browserslistrc ├── .gitattributes ├── .github └── workflows │ ├── codeql-analysis.yml │ └── nodejs.yml ├── .gitignore ├── .nvmrc ├── LICENSE ├── README.md ├── eslint.config.ts ├── index.html ├── iron-man-30-days ├── 00-prepare.md ├── 01-develop-env.md ├── 02-web-audio-api.md ├── 03-node-relationship.md ├── 04-semitone.md ├── 05-guitar-tuner.md ├── 06-stereo-panner-node.md ├── 07-panner-node.md ├── 08-source.md ├── 09-microphone.md ├── 10-analyser.md ├── 11-pitch-detect.md ├── 12-guitar-tuner-2.0.md ├── 13-processor.md ├── 14-voice-changer.md ├── 15-web-audio-api-end.md ├── 16-tonal.md ├── 17-tone.js.md ├── 18-tone.js-basic.md ├── 19-tone.js-synth.md ├── 20-tone.js-transport.md ├── 21-drum-machine.md ├── 22-sequencer.md ├── 23-sequencer-2.md ├── 24-scribbletune.md ├── 25-scribbletune-clip.md ├── 26-scribbletune-channel.md ├── 27-wavesurfer.md ├── 28-rythm.md ├── 29-javascript-end.md ├── 30-end.md └── signature.md ├── note ├── agenda.txt └── link.txt ├── package.json ├── pnpm-lock.yaml ├── postcss.config.ts ├── public └── favicon.ico ├── src ├── App.vue ├── assets │ ├── background_01.jpg │ └── logo.png ├── components │ └── Nav.vue ├── lib │ ├── audioUnlock.js │ └── snare.js ├── main.js ├── router.js ├── static │ ├── Epic_Sax_Gay.mp3 │ └── Rainy_Day_Games.mp3 ├── store.js ├── stores │ └── main.js └── views │ ├── Analyser.vue │ ├── GuitarTuner.vue │ ├── GuitarTuner_2.vue │ ├── Index.vue │ ├── PannerNode.vue │ ├── Sequencer.vue │ ├── Source.vue │ ├── StereoPannerNode.vue │ ├── Tone.vue │ ├── VoiceChanger.vue │ ├── WaveSurfer.vue │ ├── WebAudioApi.vue │ └── _template.vue ├── unocss.config.ts └── vite.config.ts /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case people don't have core.autocrlf set. 2 | * text=auto eol=lf 3 | 4 | # Declare files that will always have CRLF line endings on checkout. 5 | *.sh text eol=lf 6 | 7 | # Denote all files that are truly binary and should not be modified. 8 | *.png binary 9 | *.jpg binary 10 | *.eot binary 11 | *.svg binary 12 | *.ttf binary 13 | *.woff binary 14 | *.woff2 binary 15 | *.otf binary 16 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | name: "CodeQL" 7 | 8 | on: 9 | push: 10 | branches: [master] 11 | pull_request: 12 | # The branches below must be a subset of the branches above 13 | branches: [master] 14 | schedule: 15 | - cron: '0 20 * * 0' 16 | 17 | jobs: 18 | analyze: 19 | name: Analyze 20 | runs-on: ubuntu-latest 21 | 22 | strategy: 23 | fail-fast: false 24 | matrix: 25 | # Override automatic language detection by changing the below list 26 | # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python'] 27 | language: ['javascript'] 28 | # Learn more... 29 | # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection 30 | 31 | steps: 32 | - name: Checkout repository 33 | uses: actions/checkout@v4 34 | with: 35 | # We must fetch at least the immediate parents so that if this is 36 | # a pull request then we can checkout the head. 37 | fetch-depth: 2 38 | 39 | # If this run was triggered by a pull request event, then checkout 40 | # the head of the pull request instead of the merge commit. 41 | - run: git checkout HEAD^2 42 | if: ${{ github.event_name == 'pull_request' }} 43 | 44 | # Initializes the CodeQL tools for scanning. 45 | - name: Initialize CodeQL 46 | uses: github/codeql-action/init@v3 47 | with: 48 | languages: ${{ matrix.language }} 49 | # If you wish to specify custom queries, you can do so here or in a config file. 50 | # By default, queries listed here will override any specified in a config file. 51 | # Prefix the list here with "+" to use these queries and those in the config file. 52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 53 | 54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 55 | # If this step fails, then you should remove it and run the build manually (see below) 56 | - name: Autobuild 57 | uses: github/codeql-action/autobuild@v3 58 | 59 | # ℹ️ Command-line programs to run using the OS shell. 60 | # 📚 https://git.io/JvXDl 61 | 62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 63 | # and modify them (or add more) to build your code if your project 64 | # uses a compiled language 65 | 66 | #- run: | 67 | # make bootstrap 68 | # make release 69 | 70 | - name: Perform CodeQL Analysis 71 | uses: github/codeql-action/analyze@v3 72 | -------------------------------------------------------------------------------- /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | name: Node CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | build-and-deploy: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v4 13 | - name: Checkout 14 | uses: actions/setup-node@v4 15 | with: 16 | node-version: 24 17 | 18 | - name: Build and Deploy 19 | uses: JamesIves/github-pages-deploy-action@v4 20 | env: 21 | ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} 22 | BRANCH: gh-pages 23 | FOLDER: dist 24 | BUILD_SCRIPT: pnpm install && pnpm run build 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | 23 | package-lock.json 24 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 24 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Urtzi Urdapilleta Roy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript 音樂漫遊 - 30 天探索 Web Audio！ 2 | 3 | 如同一道好料理需要具備色、香、味，一個好網站除了好內容之外，也需要透過互動性更高的視覺、聽覺，來與內容相輔相成。 4 | 5 | 本系列將從 `Web Audio API` 出發，以說明搭配範例，從實作中逐步認識 API 規格；並挑選數個主流、有趣的 Audio 相關套件如：[`Tone.js`](https://github.com/Tonejs/Tone.js)、[`Scribbletune.js`](https://github.com/scribbletune/scribbletune)、[`Rythm.js`](https://github.com/Okazari/Rythm.js) 等，透過 JavaScript，玩轉聲音於程式的字裡行間。 6 | 7 | 歡迎您與我一同踏上這趟旅程，讓我們於科技與藝術的交會處相逢，一起在音樂中肆意漫遊。 8 | 9 | [Live Demo](https://schaoss.github.io/web-audio/) 10 | ![audio image](https://i.imgur.com/5oewowO.png) 11 | 12 | ## 2019 iT 邦幫忙 鐵人賽 13 | 14 | 本專案為參加鐵人賽的程式部分；每篇文章皆可搭配當日的 branch 看程式範例。 15 | 16 | ![iron-man](https://ithelp.ithome.com.tw/images/ironman/10th/kv-bg-content.png) 17 | 參賽文章在 [這裡](https://ithelp.ithome.com.tw/users/20111380/ironman/1783)。 18 | HackMD 好讀版在 [這裡](https://hackmd.io/c/Hksoyrxhm/%2FZyRVQ2LOQjenkhZG28iVhg) 19 | 20 | ## 執行專案 21 | 22 | 適用於 Node.js 24 或以上版本，使用 Vite 搭配 pnpm。專案樣式由 [UnoCSS](https://github.com/unocss/unocss) 控管。 23 | 24 | ``` 25 | pnpm install 26 | pnpm run dev 27 | pnpm run build 28 | ``` 29 | -------------------------------------------------------------------------------- /eslint.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'eslint/config' 2 | import vue from 'eslint-plugin-vue'; 3 | 4 | export default defineConfig({ 5 | plugins: { 6 | vue, 7 | }, 8 | extends: [ 9 | 'plugin:vue/vue3-essential', 10 | 'eslint:recommended', 11 | ], 12 | rules: { 13 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 14 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 15 | }, 16 | languageOptions: { 17 | ecmaVersion: 2021, 18 | sourceType: 'module', 19 | }, 20 | env: { 21 | browser: true, 22 | node: true, 23 | es2021: true, 24 | }, 25 | }); 26 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | Javascript 音樂漫遊 - 30天探索 Web Audio！ 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /iron-man-30-days/00-prepare.md: -------------------------------------------------------------------------------- 1 | # 出發前準備 2 | 3 | ### 旅程開始前先聊聊天吧 4 | 5 | 不知道大家有沒有拜訪過 [史萊姆的第一個家](http://www.slime.com.tw/) ? 6 | 7 | 在筆者小時候，幾乎天天都會上去找一些小遊戲來玩：洛克人 X、史瓦特大進擊、2D CS 等，許多經典、簡單的遊戲，給予了筆者珍貴的兒時回憶。但隨著時光荏苒，簡單樸素的網站即使有著豐沛的內容，對現在的我來說，已經不足以勾起興趣。 8 | 9 | 在這個影音串流當道、充滿聲光效果的多媒體時代，許多現代網站也開始嘗試加上更多引人入勝的元素；如同一道好料理需要具備色、香、味，一個好網站除了好內容之外，也需要透過互動性更高的視覺、聽覺，來與內容相輔相成。 10 | 11 | ![Digital Music](https://i.imgur.com/lfIy0Pq.png) 12 | 13 | 14 | Web Audio 不是非常新的技術，但在中文社群中，開發者數量好像一直相對的較少。本文除了記錄筆者自己的學習歷程外，也期待能達到拋磚引玉的效果，讓更多有興趣的開發者一起加入 JavaScript 音樂的探索之路。 15 | 16 | 在這三十天，本系列文預計分成 **Web Audio API**、**JavaScript 套件選集** 兩大部分，並盡可能的在每篇皆完成理論及實作部分，使其彼此相互驗證。 17 | 18 | 歡迎您與我一同踏上這趟旅程，讓我們於科技與藝術的交會處相逢，一起在音樂中肆意漫遊。 19 | 20 | 檢查好行囊，要出發囉！ 21 | 22 | > 23 | > ### 筆者 24 | > ## Gary 25 | > 半路出家網站工程師；半生熟的前端加上一點點的後端。 26 | > 喜歡音樂，喜歡學習、分享，也喜歡當個遊戲宅。 27 | > 28 | > 相信一切安排都是最好的路。 29 | > -------------------------------------------------------------------------------- /iron-man-30-days/01-develop-env.md: -------------------------------------------------------------------------------- 1 | 馬上要開始介紹 Web Audio API 了，總要有個網站來呈現各種內容吧；既然要學東西，那就順便把不熟的 Vue 架起來玩一玩囉！ 2 | 3 | ### 開始之前 4 | 5 | 筆者預期讀者您已經準備好 [Node.js](https://nodejs.org) 及 套件管理工具 (npm / yarn)，並能理解 [ES6](https://eyesofkids.gitbooks.io/javascript-start-from-es6) 的語法。而 [Vue](https://vuejs.org/) 相關的語法，由於本文主軸不在這邊，且大部分不太影響閱讀，筆者不會刻意介紹。 6 | 7 | ### Vue 8 | 9 | 前陣子 Vue Cli 3 推出了，增加了 UI 介面，讓不熟悉命令列的開發者可以透過 UI 勾勾選選快速建置專案，真的非常方便！不過這邊不會使用 UI 介面，而是使用傳統的 cli 指令完成 10 | 11 | ![Vue](https://i.imgur.com/cbkcFe1.png) 12 | 13 | #### 安裝 14 | 15 | 首先是安裝 Vue Cli。在安裝前，先確認你的電腦已經有安裝好 `node` & `npm`/`yarn`，隨後在終端機輸入： 16 | 17 | ```cs 18 | yarn global add @vue/cli 19 | ``` 20 | 21 | 接著是開啟專案，只要輸入： 22 | 23 | ```cs 24 | vue create web-audio 25 | ``` 26 | 27 | 並依著提示勾選需要的功能，這樣專案就建好囉！ 28 | 29 | #### 執行 30 | 31 | 來確認一下專案是否能順利啟動吧： 32 | 33 | ```cs 34 | yarn 35 | 36 | yarn run serve 37 | ``` 38 | 39 | 等待服務啟動。當啟動完成時，應該會看到終端機的提示如下： 40 | ![terminal](https://i.imgur.com/hv0M5jO.jpg) 41 | 42 | 服務開在 `localhost:8080`，應該會看到這樣的畫面： 43 | ![localhost](https://i.imgur.com/EMvZ30j.jpg) 44 | 45 | 確認服務正確啟動後，再來簡單做一下頁面切換吧。 46 | 利用 Vue Router 的特性，導覽頁籤一下就完工囉： 47 | 48 | ![nav](https://i.imgur.com/3AEty2G.jpg) 49 | 50 | 做到這，也就大致完成基礎建設啦～ 51 | 如果對於 Vue.js 有興趣，想要找更詳細的教學，這邊推薦我們團隊成員的 Vue 系列文章： 52 | 53 | - Adam：[網頁設計靠 Vue.js 轉前端 ](https://ithelp.ithome.com.tw/users/20111956/ironman/1784) 54 | - Alex：[Vue.js 手牽手，一起嗑光全家桶](https://ithelp.ithome.com.tw/users/20111576/ironman/1787) 55 | 56 | 也可以來看看我們 **[浪流連九程式匠自然產生的佛系碼農專區](https://ithelp.ithome.com.tw/ironman/signup/team/41)** 中，有沒有其他讀者感興趣的主題，歡迎一併訂閱追蹤喔！ 57 | 58 | 第一天就先這樣，明天就要進入正題囉！ 59 | 60 | > ### 筆者 61 | > 62 | > ## Gary 63 | > 64 | > 半路出家網站工程師；半生熟的前端加上一點點的後端。 65 | > 喜歡音樂，喜歡學習、分享，也喜歡當個遊戲宅。 66 | > 67 | > 相信一切安排都是最好的路。 68 | -------------------------------------------------------------------------------- /iron-man-30-days/02-web-audio-api.md: -------------------------------------------------------------------------------- 1 | # 02. Web Audio API 2 | 3 | 今天就開始來介紹 Web Audio API。 4 | 5 | 不囉嗦，直接上個 google doodles 的[**範例**](https://www.google.com/logos/doodles/2017/fischinger/fischinger17.9.html)，還不錯玩吧～ 6 | 7 | 8 | ## 這是什麼？ 9 | 10 | [Web Audio API](https://webaudio.github.io/web-audio-api/) 是由 W3C 規範的網站音頻 API，主要應用在 **網頁音樂的撥放、處理、編輯**，在 Github 上，也可以找到大量依賴 Web Audio API 的音樂相關套件；其實這不是一項非常新的技術，第一版至今 (2011 - 2018) 也已經發展了 7 年，也所幸如此，目前主流瀏覽器皆有支援： 11 | 12 | ![can i use](https://i.imgur.com/uc2cyKj.jpg) 13 | 14 | ~~IE11表示：嗯？什麼支援？~~ 15 | 16 | 17 | ## 為什麼要玩這個？ 18 | 19 | 如果只是要在網頁上簡單的撥放音樂，現在 html5 的`