top of page
  • Writer's pictureDinesh Thogulua

Signal processing html app in Python

I always valued interactive UIs for signal, image processing applications. Typically any signal processing system you build will come a set of knobs that you can adjust - such as the resolution of filter coefficients, the N in N-point FFTs, step-size for LMS adaptations and so on. One could make them command line options and run the code with a certain parameter value, see the results and repeat it all over again for a new parameter value. With an interactive app, you can play with different parameter values using radio buttons, sliders, check boxes and so on, and instantly see how the affect your system. I have built one such an app using plotly dash library in python. Here is a screen shot of it:

What does the app do?

The app allows the user to select a local wav file as input, scroll through the time domain signal, select a section and see its magnitude response. There are some options such as channel selection (if it is stereo file) and window (Hamming, Hann) to use with FFT. Additionally, one can also play the selected section out on speaker or headphone. I meant this app to be used as a base code upon which others can build their own apps. In other words, the app isn't terribly useful as I didn't write it with utility in mind.

Instructions on using the app

  • You need python3 and dash plotly package installed. You also need sounddevice package installed if you want the play functionality to work. You may have to install other packages based on what you have/not have already installed. I think you can figure that out

  • Go to my DSP github project page, and clone it. The wavinspector directory contains this html app. There are only two files, the and the CSS file inside the assets subfolder.

  • Run python3 in the terminal and it launches a html server as shown below

  • As the prints in the terminal show, the app can be accessed by typing in in your favourite browser. I have tested the app in firefox and chrome.

  • You will see a screen as shown below with empty charts and filename field as below:

  • You have to type in the full path to you local wav file that you want to inspect. This is a bit painful. I would have preferred to have a file dialog box allowing the user to browse through their folders - but apparently html allows this functionality only if you are going to upload the wav file (not just choose its path) for some security reasons. But that would mean possibly flooding RAM used by the python code. So I chose this method of the user typing in the whole path. Note that you cannot use ~ to refer to your home folder in linux. You have to type in /home/<username>/... and hit the Enter key

  • As you type in the path, a green tick mark whenever a / is typed (after folder name) if your path is correct up to that point. If it is wrong, then a red check mark would appear. This is useful if the path is long - so that the user doesn't have to wait until s/he finishes typing in the entire path only to find out at the end that a typo was made early on. The following screen shows this check mark indicating that /dinesh/ doesn't exist. A message "Incorrect path" also appears.

  • Anyway, once you type in the right path and hit enter, you will see the time domain and frequency domain signals appear on the right for default choices of parameters as the UI shows: channel 1 of the wav file data and Rectangular window

  • There are two sliders between the time domain and frequency domain charts. The first slider allows you to scroll through the wav file - you can see the x-axis timestamp of the top chart change along with the signal. The second slider, a range slider, allows you to choose a subsection of the displayed time domain data. This section will appear is orange as you play with the range slider. The bottom chart will show the magnitude response of that orange section.

  • Note that the magnitude response is plotted in dBFS based on the resolution of the selected wav file.

  • You can change the channel or FFT window as you desire and see how the charts change

  • The PLAY SELECTED button allows you to hear the orange section of the signal selected. However, this requires installation of port audio, ALSA and the procedure is a little painful. This link and this link should help - They are for installing pyAudio package. But the same procedure should work for installing sounddevice package as well.

  • If you don't want to deal with the complications mentioned in the above bullet point, you can choose to not have the play functionality working and try out the app without it. All you have to do is to comment out the section of the code shown below in The html app will sill show the PLAY SELECTED button, but it won't do anything.

# Begin: Comment out this section if you don't want to deal with portaudio, sounddevice etc 
# Callback for playing the selected audio data (orange part selected using range slider)
import sounddevice as sd
@app.callback(Output('play', 'n_clicks'), Input('play', 'n_clicks'))
def play_section(n_clicks):
    global wf, selected_section

    if wf != None and selected_section.size != 0:, wf.getframerate(), device=sd.default.device[1])
    return n_clicks # This here hasn't got a purpose - Dash demands that we always return something!
# End: Comment out this section if you don't want to deal with portaudio, sounddevice etc 

Known issues

  1. ALSA underrun happens and error messages can be seen in the terminal. It doesn't crash the app since it isn't critical. I have found a novel way to handle this issue - close your eyes and pretend they aren't there. Attempts to handle the issue will be painful and won't be very rewarding as most will find the app's play functionality to be already satisfactory


The app uses code from statworx. This link describes how to build a dash app (for stocks data). Please go through it. I think you will find it very useful.

28 views0 comments

Recent Posts

See All



bottom of page