BlogAll Blog Posts | Next Post | Previous Post
Thursday, February 04, 2021
A new year and yet another new theme for blog articles. After #GRIDGOODIES and #FREEBIEFRIDAY, this is a new theme we introduce with #WEBWONDERS. In these blogs, we explore the wonderful world of the browser operating system and uncover hidden or not so hidden treasures, tips and tricks.
So, let's kick of this new series with exploring the world of web audio. Modern browsers make the web audio API available. The goals of the web audio API are mixing sound, generating sound and applying effects to sound from web applications.
TMS WEB Core includes the Pascal import unit for using the web audio API from our beloved language. This unit is in the RTL subfolder that contains all units for several different browser APIs.
So, the Pascal function to do this is:
procedure playfreq(freq, volume: double); var ctx: TJSAudioContext; buf: TJSAudioBuffer; wave: TJSFloat32Array; i,len: integer; src: TJSAudioBufferSourceNode; sampleFreq: double; begin // connect to the browser window Audio Context. asm ctx = new (window.AudioContext || window.webkitAudioContext)(); end; // get the sample frequency the audio context can use len := round(ctx.sampleRate); // create a new buffer of floating point values wave := TJSFloat32Array.new(len); // determine the sine wave frequency in relation to the audio context sample frequency sampleFreq := ctx.sampleRate / freq; // create a buffer on the audio context buf := ctx.createBuffer(1, len, ctx.sampleRate); wave := buf.getChannelData(0); // fill the float array with the sine wave data taking frequency & volume in account for i := 0 to len - 1 do wave[i] := (volume /100) * sin(i/(samplefreq/(2*PI))); // create a buffer source object for the audio contect src := ctx.createBufferSource(); // assign the buffer holding the wave to the audio buffer source object src.buffer := buf; // connect the audio buffer source object to the audio context output src.connect(ctx.destination); // play the sample from position 0 src.start(0.0); end;
With this Pascal routine, it becomes simple to put two TWebTrackBar components on the form that allow to select the frequency and the volume and add a button to play the sound. With a frequency selectable between 20Hz en 20000Hz and volume between 0% and 100%, you have a little web application to test your ears frequency range or speaker frequency range, whatever fails first.
You can experiment with the web application here
So, go ahead and explore the web audio API to create new exciting applications, either with TMS WEB Core in Delphi or Lazarus or with TMS WEB Core for Visual Studio Code.
Curious about web technology? Or you have interesting challenges to accomplish in a web application, let us hear what you want to see covered in a next #WEBWONDERS blog!
This blog post has not received any comments yet.
All Blog Posts | Next Post | Previous Post