Poradnik do frameworka ToneJS #1 Generowanie dźwięku.

Gdy postanowiłem zaprogramować syntezator to z początku zastanawiałem się w jaki sposób odbywa się generowanie dźwięku w aplikacjach webowych. Pierwszym sposobem, najprostszym byłoby użycie gotowych, wcześniej przygotowanych dźwięków w formacie .mp3, bądź .wav.

Jednak jest to trochę obchodzenie problemu dookoła i wydajnościowo mało opłacalne.

Lepszym sposobem jest wykorzystanie Audio-Context. I mimo, że oferuje on bardzo dużo, to wydaje mi się, że wykorzystanie zewnętrznego frameworka jak Tone.js jest o wiele lepszym pomysłem. Czemu tak myślę? Gdyż framework ten posiada szereg funkcji, metod, efektów oraz możliwość dalszego ich rozwijania bez konieczności pisania wszystkiego od zera. W końcu po co wynajdować koło na nowo?

Link do frameworka znajdziecie tutaj: https://github.com/Tonejs/Tone.js

A oficjalna dokumentacja w języku angielskim znajduje się pod tymi adresami:

https://tonejs.github.io/

https://tonejs.github.io/docs/

https://github.com/Tonejs/Tone.js/wiki/Time

Jeżeli chcecie sprawdzić jakie możliwości oferuje ten framework to znajdziecie przykłady pod tymi adresami:

Oficjalne przykłady: https://tonejs.github.io/examples/

Przykłady stworzone przez społeczność: https://tonejs.github.io/demos

A poniżej krótki przykład jak Tone.js wypada w praktyce.

Jeżeli chcecie wrzucić kod do waszego IDE to możecie wrzucić poniższy kod:

<script type="text/javascript" src="https://tonejs.github.io/build/Tone.min.js"></script>
<script type="text/javascript" src="https://tonejs.github.io/Logo/build/Waveform.js"></script>
<script type="text/javascript" src="https://tonejs.github.io/assets/css/interface.css"></script>
<div id="content">
    <button id="C4">C4</button>
    <button id="E4">E4</button>
    <button id="G4">G4</button>
    <button id="B4">B4</button>
</div>

<style>
    #content {
        position: absolute;
        width: auto;
        height: auto;
        left: 50%;
        top: 50%;
        z-index: 1;
        transform: translate(-50%, -50%);
    }
</style>
<script>
    var synth = new Tone.AMSynth().toMaster()

    //attach a listener to all of the buttons
    document.querySelectorAll('button').forEach(function(button) {
        button.addEventListener('mousedown', function(e) {
            //play the note on mouse down
            synth.triggerAttack(e.target.textContent)
        })
        button.addEventListener('mouseup', function(e) {
            //release on mouseup
            synth.triggerRelease()
        })
    })
</script>

 

Z kodu który warto zapamiętać są to:

var synth = new Tone.AMSynth().toMaster()

Tworzy wam nowy syntezator i bez niego nie jesteście w stanie generować dźwięków.

synth.triggerAttack(e.target.textContent)

Włącza dźwięk pobrany przez button HTML. Barwa dźwięku jest zależna od pobranego tagu ID.

Gdybyśmy wykluczyli tagi, to generowanie dźwięku mogłoby się odbyć przy pomocy tej linijki kodu:

synth.triggerAttack("C4");

W tym przypadku linijka powyżej wygeneruje nam dźwięk o wysokości C4.

Za każdym razem gdy generujemy dźwięk przy użyciu „triggerAttack” to musimy również go zwolnić. Gdybyśmy tego nie zrobili to dźwięk by „brzmiał” ciągle w tle.

Robimy to przy pomocy tej linijki kodu:

synth.triggerRelease()

I to byłoby tyle jeżeli chodzi o całkowite podstawy. Wkrótce postaram się więcej napisać na temat tego frameworka i wrzucić więcej przykładów.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *