Web音訊API 向Web應用程式新增聲音

不再。由於這些使用者體驗暴行被燒毀，web開發人員遠離它。可悲的是，聲音在網路上排在了後排，而本機應用程式卻蓬勃發展。

想想當您收到電子郵件時聽到的通知聲音，或者當您重新整理twitter應用程式時聽到的小聲音。此類應用程式展示了聲音如何與出色的使用者體驗整合在一起。

在本教程中，我將向您展示如何以一種很好的方式將聲音傳回網路！

在本教程中，我們將模擬乙個付款頁面，該頁面會向我們提供有關付款成功的音訊反饋。我將使用bootstrap使事情看起來更快。

are you ready to buy this item? buy now

您會在最底部注意到我包含乙個名為「 success-sound.js」的檔案。在這裡，我們將編寫**以在使用者付款成功後向其提供音訊反饋。建立此檔案後，我們要做的第一件事就是建立audiocontext。您可能從上一教程中還記得，audiocontext是我們訪問web audio api各種功能的方式。

var context = new audiocontext();

關於web audio api的最好的事情之一是，它使我們無需檢視音訊檔案即可從頭開始建立聲音。我們使用振盪器來做到這一點。

振盪器是一種營造我們可以聽到的音調的方式。他們通過產生一定頻率的週期波來做到這一點。該波的形狀各不相同，但最常見的型別是正弦波，方波，三角波和鋸齒波。這些型別的波聽起來都不同。讓我們建立兩個三角波振盪器。

var osc1 = context.createoscillator(),
osc2 = context.createoscillator();
osc1.type = '********';
osc2.type = '********';

振盪器預設情況下聲音很大，因此除非我們想讓使用者感到恐懼，否則應將音量調低一點。因為web audio api通過將節點鏈結在一起以通過管道傳遞聲音來工作，所以我們建立了振盪器並將其連線到gainnode。

var volume = context.creategain();
volume.gain.value = 0.1;

增益節點將輸入的聲音音量乘以您指定的數字。因此，在這種情況下，音量將是傳遞給它的訊號的十分之一。

讓我們連線一切。

// connect oscillators to the gainnode
osc1.connect(volume);
osc2.connect(volume);
// connect gainnode to the speakers
volume.connect(context.destination);

// how long to play oscillator for (in seconds)
var duration = 2;
// when to start playing the oscillators
var starttime = context.currenttime;
// start the oscillators
osc1.start(starttime);
osc2.start(starttime);
// stop the oscillators 2 seconds from now
osc1.stop(starttime + duration);
osc1.stop(starttime + duration);

var frequency = 493.883;
osc1.frequency.value = frequency;
osc2.frequency.value = frequency;

如果我們使振盪器失諧以使其頻率稍有不同，則最終會產生很好的合唱效果，使音色更豐富。

var frequency = 493.883;
osc1.frequency.value = frequency + 1;
osc2.frequency.value = frequency - 2;

雖然我們的小聲音聽起來好多了，但突然結束了。為了減少這種震顫，我們應該在聲音結束時swift調低音量。這也稱為「淡出」。這是通過audioparams完成的，這些音訊引數用於自動執行音訊節點的值，例如增益和頻率。在本系列的下乙個教程中，我們將更詳細地介紹audioparams。

// set the volume to be 0.1 just before the end of the tone volume.gain.setvalueattime(0.1, starttime + duration - 0.05); // make the volume ramp down to zero 0.1 seconds after the end of the tone

volume.gain.linearramptovalueattime(0, starttime + duration);

我們在這裡要說的是確保在完成音調之前將音量設定為0.1、0.05秒。然後繼續調低音量，直到聲音結束的同時達到零。

到目前為止，讓我們將**包裝到乙個函式中，看看我們有什麼。

// play oscillators at certain frequency and for a certain time
var playnote = function (frequency, starttime, duration) ;

為了使此功能更強大，我刪除了一些變數並允許傳遞這些值。這使我們能夠以不同的頻率演奏不同的音符。現在是時候發揮創造力了！

音訊方面，成功的指示實際上非常簡單。最後，音高上公升的**主題總是比音調下降的**主題更為歡樂。您甚至都不需要調子或一堆音符來傳達這一點。為了證明這一理論，讓我們僅用兩個單音作為我們的成功主題。

// play a 'b' now that lasts for 0.116 seconds
playnote(493.883, context.currenttime, 0.116);
// play an 'e' just as the previous note finishes, that lasts for 0.232 seconds
playnote(659.255, context.currenttime + 0.116, 0.232);

啊，成功的甜美聲音。

請記住，如果玩振盪器不是您的樂趣所在，則可以改用***檔案。閱讀上一教程，了解操作方法。

var playsuccesssound = function () ;

var myfakeajaxcall = function (callback) , 3000);
};

我們現在要做的就是將事件***新增到「立即購買」按鈕中。

$('#buy-now-button').click(function () );
});

單擊該按鈕，等待三秒鐘，然後在聽到音訊確認您的交易成功的訊息時高興地跳舞。

為了更改按鈕上的文字以直觀地指示發生了某些事情，bootstrap提供了一些按鈕幫助器函式來交換data屬性中提供的文字。這種工作方式不在本文討論範圍之內，但這是完整性的**。

$('#buy-now-button').click(function () );
});

Web音訊API 向Web應用程式新增聲音

Spring Junit4 測試Web應用程式

桌面工具向 Web 應用的躍遷

使用koa搭建web應用api詳解

Web音訊API 向Web應用程式新增聲音

Spring Junit4 測試Web應用程式

桌面工具向 Web 應用的躍遷

使用koa搭建web應用api詳解

相關推薦