iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

5 Like 1 留言 9202 瀏覽

鐵人賽 Modern Web DAY 3

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 3 篇

技術 02. Web Audio API

今天就開始來介紹 Web Audio API。不囉嗦，直接上個 google doodles 的範例，還不錯玩吧～這是什麼？ Web Audio API 是...

Gary ‧ 2018-10-18 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

2 Like 1 留言 5822 瀏覽

鐵人賽 Modern Web DAY 15

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 15 篇

技術 14. 變聲器

接續昨天的話題，今天我們要透過 ScriptProcessorNode 來實作變聲器。如果讀者您不知道什麼是變聲器的話，可以參考：這篇會涉及訊號處理的部分...

Gary ‧ 2018-10-30 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

1 Like 0 留言 5559 瀏覽

鐵人賽 Modern Web DAY 11

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 11 篇

技術 10. Web Audio API - 分析結點

第十天，本系列文關於 Web Audio API 的部分也逐漸邁向尾聲。今天要介紹的是做頻譜分析、音檔視覺化必要的 AnalyserNode。 Analyser...

Gary ‧ 2018-10-26 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

1 Like 0 留言 4586 瀏覽

鐵人賽 Modern Web DAY 5

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 5 篇

技術 04. 吉他定音器 - Part.1

介紹了幾天，也稍微玩了一些功能，是不是快受不了 Web Audio API 文件導讀啦 XD？那麼就用已經玩到的部分，來做個簡單的吉他定音器吧！吉他定弦一...

Gary ‧ 2018-10-20 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

2 Like 0 留言 4339 瀏覽

鐵人賽 Modern Web DAY 4

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 4 篇

技術 03. Web Audio API - 節點關係

經過昨天的簡易小範例，應該對於 Web Audio API 大致的使用方法就不陌生了吧？今天就接著來介紹Web Audio API 的節點關係。節點關係如...

Gary ‧ 2018-10-19 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

1 Like 0 留言 3940 瀏覽

鐵人賽 Modern Web DAY 10

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 10 篇

技術 09. Web Audio API - 音源 Part.2

延續昨天的話題，今天要來玩玩看麥克風收音！麥克風收音收音也不是我們網站想收就能收的，要先透過 navigator.mediaDevices 的 getUse...

Gary ‧ 2018-10-25 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

1 Like 1 留言 3834 瀏覽

鐵人賽 Modern Web DAY 9

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 9 篇

技術 08. Web Audio API - 音源 Part.1

音效處理節點玩了不少，今天就來看看一直忽略的音源部分能玩出什麼變化吧！振盪器 Oscillator 到目前為止，前面所有的範例，音源都是透過 const os...

Gary ‧ 2018-10-24 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

1 Like 0 留言 3459 瀏覽

鐵人賽 Modern Web DAY 7

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 7 篇

技術 06. Web Audio API - 立體音效

今天要來介紹 Web Audio API 裡的 StereoPannerNode。由於是立體音效，內文中的範例及程式Demo，都建議佩戴耳機聆聽，效果比較好喔！...

Gary ‧ 2018-10-22 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

1 Like 0 留言 2943 瀏覽

鐵人賽 Modern Web DAY 8

ａｅｓｔｈＥｔｉｃ，ＣＹＢＥＲのａｕｄｉｏ / ＶＩＳＵＡＬ，網頁中的聲音與影像研究系列第 8 篇

技術 §ｄ０８§ 全頻率震動！派對音響工程！為何選 Tone.js 當作 Audio Framework？

0. 今日工事結構性美麗：Why Framework？有人喜歡，有人不喜歡：Which Framework？ howler.js Tone.js 就決定...

vibertthio ‧ 2017-12-27 ‧團隊ｃｙｂｅｒ▲ｃｒｅｗ

1 Like 0 留言 2730 瀏覽

鐵人賽 Modern Web DAY 14

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 14 篇

技術 13. Web Audio API - 處理結點

不知不覺來到第十三天，在這段時間我們一起認識了許多 Web Audio API 的特色功能，也在過程中做出不少小玩具。如果目前玩過的功能都無法滿足讀者您，那最後...

Gary ‧ 2018-10-29 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

1 Like 0 留言 2455 瀏覽

鐵人賽 Modern Web DAY 16

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 16 篇

技術 15. Web Audio API - 總整理

不知不覺這旅程也到一半了，讓我們稍微回顧一下目前我們聊到的東西吧。 Live Demo 在開始之前，讀者您需要準備好開發環境，並對 Javascript 的語...

Gary ‧ 2018-10-31 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

2 Like 0 留言 2423 瀏覽

鐵人賽 Modern Web DAY 12

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 12 篇

技術 11. 吉他調音器 Part.1

上周我們用振盪器當音源，並用那時候玩到的的東西，做出可以設定基準音，可以調整定弦法，可以單獨撥放各弦單音的吉他定音器。現在學會了怎麼取得麥克風音訊，我們來挑戰...

Gary ‧ 2018-10-27 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

1 Like 0 留言 2369 瀏覽

鐵人賽 Modern Web DAY 8

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 8 篇

技術 07. Web Audio API - 3D 音源計算

接著昨天的話題，今天就來玩玩 PannerNode 及 AudioListener，並在最後做出一個可以藉由拖拉控制位置的程式應用範例～同樣的，由於是立體音效，...

Gary ‧ 2018-10-23 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

3 Like 0 留言 2200 瀏覽

鐵人賽 Modern Web DAY 13

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 13 篇

技術 12. 吉他調音器 Part.2

經過昨天演算法的腦力轟炸，剩下的部分就顯得相對簡單了。我們來一鼓作氣完成它！先複習一下調音器預計要實作的流程目前解決了最麻煩的聲音 -> 頻率這...

Gary ‧ 2018-10-28 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

1 Like 0 留言 2015 瀏覽

鐵人賽 Modern Web DAY 6

JavaScript 音樂漫遊 - 30 天探索 Web Audio！系列第 6 篇

技術 05. 吉他定音器 - Part.2

接著，今天就來把定音器完成吧！依照昨天立定的計畫：練習做出可調整基準音 + 可設定調弦法 + 分別撥放單弦聲音的吉他定音器。開始依序完成吧！基準...

Gary ‧ 2018-10-21 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

0 Like 0 留言 1966 瀏覽

技術 <學習筆記>如何在 vue-cli 中使用 audio(src="")

新增 vue.config.js module.exports = { chainWebpack: config => { config...

愛看海的工程師 ‧ 2019-07-31

1 Like 0 留言 1588 瀏覽

鐵人賽 Modern Web DAY 2

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 2 篇

技術 Chapter1－DJ最愛的音頻動感圖像（I）基本流程圖 & 操作DOM介面

在開始前，還沒看過序章的朋友們，可以點擊進去，教學大綱和主題方向都寫在裡面囉！看完這章節，你會學到... 地基一定要打穩，如果基本的還不會的話，建議先去w...

jerrythepotato ‧ 2021-09-09

1 Like 2 留言 1445 瀏覽

鐵人賽 Modern Web DAY 1

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 1 篇

技術序章：最幸福的事，莫過於當你看到code變成一幅幅美麗的畫

自序大家好，我是來自中山大學的Jerry，接觸javascript大約三年了，雖然不像業界的各路大神日夜專研，不過熬夜爆肝寫code的日子也是不少，可以參考最...

jerrythepotato ‧ 2021-09-08

0 Like 0 留言 1212 瀏覽

鐵人賽 Modern Web DAY 5

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 5 篇

技術 Chapter1－DJ最愛的音頻動感圖像（IV）讓音樂動起來！開篇基礎設定和動畫框架

話不多說先上圖從左到右依序執行，最後該函式會再呼叫自己一次，圖中淡化的區塊是下個章節的主題然後把它跟程式碼做對應： function Animatio...

jerrythepotato ‧ 2021-09-12

1 Like 0 留言 1044 瀏覽

鐵人賽 Modern Web DAY 3

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 3 篇

技術 Chapter1－DJ最愛的音頻動感圖像（II）只要是認識Canvas的都覺得它很High歐

完成上傳機制後，等著我們的是．．．今天的一開始先花一點點時間，把昨天的事件監聽做完吧！這邊準備好一個基本的介面： Css就不做教學了XD，大家用自己喜歡的樣...

jerrythepotato ‧ 2021-09-10

0 Like 0 留言 881 瀏覽

鐵人賽 Modern Web DAY 21

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 21 篇

技術 Chapter4 - Canvas背景動畫（II）就如那輕薄的鴻毛，我心上小船載浮載沉

今天西子灣被斷網了，所以沒時間打太多字，請見諒，有看不懂的留言詢問哦!https://jerry-the-potato.github.io/Chapter4-d...

jerrythepotato ‧ 2021-09-28

0 Like 0 留言 826 瀏覽

鐵人賽 Modern Web DAY 13

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 13 篇

技術 Chapter3 - 動感DJ續篇進一步操作陣列，讓音樂嗨起來

打了2000字消失了怎麼辦呢(´・_・`) 先去上個廁所壓壓驚，懇請IT邦邦忙快優化界面在編輯介面有許多的連結藏在各個角落，而且不是設計成另開分頁，直接無情跳...

jerrythepotato ‧ 2021-09-20

0 Like 0 留言 769 瀏覽

鐵人賽 Modern Web DAY 19

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 19 篇

技術 Chapter4 用音樂做動畫結合前三章學習的內容，一口氣衝刺吧！

題外話昨天沒把樹葉畫上去，還是心癢癢的，所以動手簡單裝飾了一下這棵樹：https://jerry-the-potato.github.io/Chapter3-...

jerrythepotato ‧ 2021-09-26

0 Like 0 留言 707 瀏覽

鐵人賽 Modern Web DAY 22

從零開始打造網頁遊戲－造輪子你也辦的到！系列第 22 篇

技術 Chapter4 - Canvas背景動畫（III）風中的花朵今天再加碼讓動畫更加自然的方法

一樣先上圖! https://jerry-the-potato.github.io/Chapter4-demo3/ Staring（因為像星星一樣繞行）有了前...

jerrythepotato ‧ 2021-09-29

0 Like 0 留言 360 瀏覽

鐵人賽自我挑戰組 DAY 18

JavaScript 是什麼？可以吃嗎？系列第 18 篇

技術 Day18 - 使用 Audio API 實現音頻視覺化

嗨~大家好我是Eric~ 音頻視覺化是一個很有趣的領域，不僅可以讓我們更直觀地感受音樂，還能提供一個極富吸引力的用戶體驗，在這篇文章中，我會展示如何使用 Web...

Eric ‧ 2023-09-18

1 Like 0 留言 116 瀏覽

鐵人賽佛心分享-SideProject30 DAY 24

讓演算法起舞：前端特效應用的探索之旅系列第 24 篇

技術 D1 Three.js 與音訊處理：3D 音頻視覺化的架構搭建指南

引言在上一個主題中，我們用原生 JS 完成了基本的粒子系統和排序演算法的視覺化，然而，造輪子還是有一定的局限性，尤其是更複雜的圖形如 3D 的投影和座標轉換，...

jerrythepotato ‧ 2024-10-07 ‧團隊鐵齒不信寫不完