網(wǎng)頁播放音樂代碼(網(wǎng)站音樂播放器插件代碼)
在 CSS-Tricks 上看到一篇介紹 Web Audio API 的文章，學(xué)以致用，為工具箱中的摩斯密碼轉(zhuǎn)換器加上了在線播放功能。
從 AudioContext 開始
Web Audio API 主要通過 AudioContext 來處理音頻，就好像 RenderingContext 之于 Canvas API。
// Safari 需要 `webkit` 前綴
varAudioContext= window.AudioContext|| window.webkitAudioContext;
varctx = newAudioContext();
通常一個典型的 Web Audio API 操作流程是這樣的：
創(chuàng)建音頻上下文對象
創(chuàng)建音頻源：音頻文件、振蕩器（生成聲波）或音頻流（攝像頭/麥克風(fēng)）
連接效果節(jié)點
輸出音頻
通過 Oscillator（振蕩器）生成聲波
Oscillator 可以發(fā)出指定波形和頻率的聲波。
讓我們來聽下四種常見的波形：方波 (square)、三角波 (triangle)、正弦波 (sine) 和鋸齒波 (sawtooth)
展開全文
通過 Oscillator，我們無需音頻文件，就能生成和電報一樣的聲音：
varoscillator = ctx.createOscillator();
// 設(shè)置波形
oscillator.type = "sine";
// 設(shè)置頻率
oscillator.frequency.value = 600;
為了把音頻輸出到揚聲器，你需要將各個節(jié)點連接起來。接著上面的代碼，將 Oscillator 節(jié)點連接到 AudioContext.destination（即輸出設(shè)備），調(diào)用 start() 方法開始播放。
varAudioContext= window.AudioContext|| window.webkitAudioContext;
varctx = newAudioContext();
varoscillator = ctx.createOscillator();
oscillator.type = "sine";
oscillator.frequency.value = 600;
oscillator.connect(ctx.destination);
oscillator.start();
要更改音量，你需要連接一個 GainNode（音量控制器）節(jié)點。新的節(jié)點路由變成了：oscillator - gainNode - destination
vargainNode = ctx.createGain();
oscillator.connect(gainNode);
gainNode.connect(ctx.destination);
// 從第 0 秒開始設(shè)置音量為 0.5
gainNode.gain.setValueAtTime(0.5, 0);
gainNode.gain返回的是一個 AudioParam 對象，它有一個 setValueAtTime(value, startTime) 方法來在指定時間設(shè)置指定值。
// AudioContext.currentTime 返回的是當(dāng)前時間
gainNode.gain.setValueAtTime(0.5, ctx.currentTime + 0);
// 1 秒后恢復(fù)音量
gainNode.gain.setValueAtTime(1.0, ctx.currentTime + 1);
摩爾斯電碼（英語：Morse code）是一種時通時斷的信號代碼，通過不同的排列順序來表達不同的英文字母、數(shù)字和標(biāo)點符號。是由美國人艾爾菲德·維爾(Alfred Lewis Vail)與薩繆爾·摩爾斯(Samuel Finley Breese Morse)在1836年發(fā)明。 —— 維基百科
摩爾斯電碼（英語：Morse code）是一種時通時斷的信號代碼，通過不同的排列順序來表達不同的英文字母、數(shù)字和標(biāo)點符號。是由美國人艾爾菲德·維爾(Alfred Lewis Vail)與薩繆爾·摩爾斯(Samuel Finley Breese Morse)在1836年發(fā)明。 —— 維基百科
播放摩斯密碼所需要的 Web Audio API 上文都已介紹，現(xiàn)在我們只需要根據(jù)摩斯密碼在不同的時間點設(shè)置音量為 1 或 0 就能實現(xiàn)電報效果了。
小結(jié)
本文只介紹了 Web Audio API 的冰山一角，更多的特性就等你自己發(fā)掘了～
HTML5 音頻 API Web Audio
掃描二維碼推送至手機訪問。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請注明出處。
