iT邦幫忙

web audio api相關文章
共有 24 則文章
鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 13

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

打了2000字消失了怎麼辦呢(´・_・`) 先去上個廁所壓壓驚,懇請IT邦邦忙快優化界面 第一次看到這種一堆有的沒的外部連結擋路的編輯介面,還不設計成另開分頁,...

鐵人賽 Modern Web DAY 5

技術 Chapter1-DJ最愛的音頻動感圖像(IV)讓音樂動起來!開篇基礎設定和動畫框架

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 Modern Web DAY 1

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

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

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

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

鐵人賽 Modern Web DAY 16

技術 15. Web Audio API - 總整理

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

鐵人賽 Modern Web DAY 15

技術 14. 變聲器

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 3

技術 02. Web Audio API

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