WordPress: Button Audio Player Without Plugins

chicks making sounds

This post shares how to create a button that plays audio or has sound effects on click. This function is developed by Syncer.jp, who is a Japanese developer. (reference: https://syncer.jp/html5-javascript-hello-button).

I am using this button especially to demonstrate pronunciations for foreign languages as in the following article (see the "Vocabulary" section).

Related
Books and Coffee
Vocabulary Building: Divergent Chapter 2
Beatrice starts the aptitude tests that will tell her which faction is a right fit for her...more  
English Memo

Here is another simple example:
(When you click the bird icon, it sings.)

This fascinating function turns Icons, images, texts, or anything into an audio button. I will walk you through how to introduce this button in WordPress.

Download A JavaScript File

First, we download a JavaScript file from the developer's website: https://syncer.jp/html5-javascript-hello-button#sec-5. The file is named "sounds-multi.js" and located at the bottom of the website. I make the link directly to the section where you can find the document since the page is written in Japanese. Among the documents, the file "sounds-multi.js" is located in the middle. Click "Download" and the file will be downloaded to your computer.

download a file

A Tiny Modification to The File

Then, open the downloaded file with a text editor and modify it a little. Delete ./ which is written around line 37. This line specifies the location of the audio file that we want to use.

// the original
var setDir = './';

// empty inside the single quotes
var setDir = '';
memo
./ means current directory.

Upload The JavaScript File to WordPress Directory

Next, we will upload the above JavaScript file to the current theme directory.

For example, I uploaded it to a directory called "js" inside the current theme directory. We will use this path to the file in the following step.

Load The JavaScript File

Add the following line before </body> tag which is usually in the footer.php. The file's path written inside src=" " on the 2nd line varies based on the file's location.

<!-- loading the JavaScript file -->
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/sounds-multi.js" ></script>
Example: my file path
I uploaded the JavaScript file to public_html > wp-content > themes > current theme > assets > js.
So, my file path is
src="<?php echo get_stylesheet_directory_uri(); ?>/assets/js/sounds-multi.js".

Get Audio Files

According to https://caniuse.com/, .mp3 and .wav files cover almost all the browsers when combined. The developer of this button recommends using both files so that the users of the website can enjoy the audio regardless of the browsers they use.

Once you get either type of the audio file, you can convert it to another type by using free online audio converter such as https://online-audio-converter.com/.

When you provide both files, make sure that the filenames except extensions match. For instance, hello.mp3 and hello.wav are fine, whereas hello123.mp3 and hello100.wav won't work.

WorksWon't Work
hello.mp3hello123.mp3
hello.wavhello100.wav

If you want to make images as buttons, you also need to get the image files.

Upload the files to your media library in the WordPress.

Make An Audio Button

To create an audio button, surround the element with <a></a> tag like below. Note that the extension of the file should be omitted when specifying the URL of the file at data-file=" ".

<a href="#" class="sounds" data-file="file's-URL-without-extension">
<img (or icons, texts, etc.) >
</a>
chicks

By using this function, this image also turns into an audio button. (Click the chicks!)

The code of this button is below.

<!-- The Chicks' Audio Button -->
<a href="#" class="sounds" data-file="https://example.com/wp-content/uploads/chick">
<img src="https://example.com/wp-content/uploads/chicks.png">
</a>

The URL of the audio file can be found at the media library. Using the "Copy URL to clipboard" button is convenient. Again, when pasting the URL to the data-file=" ", the extension should be excluded.

url to the audio file

Examples

"Thank You"Pronunciation
Thank you (English)
ありがとう (Japanese)
¡Gracias! (Spanish)
谢谢 (Chinese)
고마워요 (Korean)

I am so excited to use this audio button on my website. Hope you also like it!

\ Share /

Leave a Comment