Integrating JavaScript libraries is becoming an obsession of mine. I spend my half free time searching for new integrations that might work in FileMaker, and the other half implementing those. I look for JS libraries that are accessible and ones that provide functionality that might be used in a custom app. I think that this next one, a FileMaker Audio Player can be very useful. Let’s take a look how to integrate this simple library.

Feel free to download the sample files here.

This video describes how I set this up. It’s shorter, about 35 minutes. As is usual, I make some mistakes along the way.

Key Points

Setting up the FileMaker audio player

Just like the other videos, we set up an HTML table in the normal way. We’ve got fields that will hold each text file: the HTML, the CSS, and the JavaScript files.

It’s common for me to do this since this allows the JavaScript to work offline. All the code needed for the library, in this case the FileMaker Audio Player, to work is in a record in a table. The web viewer can work with the text in each field.

Also, this structure closely resembles an actual web page construction. A web designer will create one file for each CSS or JavaScript library. Then, in the HTML document, she will link those together. We’re doing roughly the same thing here. We’ve got placeholder text in the HTML field. FileMaker’s calculation engine will, in the HTML_Calc field, do the work of placing the code inside the HTML page at runtime. And the web viewer will work.

The placeholder text set up resembles how web designers structure their page.

The placeholder text set up resembles how web designers structure their page.

There’s another way to work with libraries: our Web Viewer Bridge set up. That’s a free tool you can use. We’ll study it in an upcoming blog and video (more likely a few of those).

The Audio

The FileMaker Audio player can play an actual audio file that is stored in a container field. The library plays it in the web viewer. The web viewer, however, needs the audio file in base64 encoded form, so we have to base64 encode the file in another field or on the fly.

In the video I use the old FileMaker function Base64Encode. This works, but it places a return character after so many characters. And those characters mess up the audio file. I should have used the new one: Base64EncodeRFC which accepts a parameter in the form of a number telling the function to not insert any return characters.

Once the audio is encoded, it is placed in the Data field and used in the JS_Function field in a function there.

The possibilities

This library does one thing: it plays audio showing that audio’s wave form in a web viewer. It does have a few possibilities. Here are some of the options you can update:

  • The color of the wave form
  • The color of the progress wave form
  • The color of the current-time indicator
  • The height of the wave form
  • The playback speed

There’s a lot you can do with this.

Additionally, you can add buttons that do more, that control the wave form. In my final example, I added a button to change the playback speed and a slider to adjust the volume. These two are in addition to the standard play/pause.

Use your JavaScript skills

Finally, I put together JavaScript functions to make the user experience better. For example, the button that plays or pauses the audio has text that changes. If the music is not playing, the button says “Play”. When I click on the button and the music begins to play, the button’s text changes to “Pause”.

This type of functionality can only be done by actually using JavaScript to change the text. During DevCon 2018, we spent some time learning pur JavaScript. Though it wasn’t as exciting as the integrations, learning JS is essential to actually using the libraries. I couldn’t change the text from “play” to “pause” without knowing some JavaScript.

Try out the FileMaker Audio Player

Give this one a try. Even if you’ve no immediate use for it, it’s worth the time to practice your integration skills.