How to Embed Soundbuttons on your Site in 2021

Do you have audio files you want to share with your audience? If you're hosting your own WordPress website, nothing could be easier.

Though it’s not a good idea to add music to your site just for the sake of it, there are some good and valid reasons to include audio in your website. Here are a few:

●      A musician sharing samples of her music.

●      A podcaster making his shows available.

●      Schools, churches, and event websites allowing visitors to listen to seminars, sermons, or keynotes.

●      Teachers, trainers, and educators including audio examples in their online lessons.

●      Bloggers adding bonus content to their site, for example, interviews. You may not realize this, but WordPress is capable of handling audio files by default.

It’s not hard if you know how to insert an image in the post, you won’t have any problems inserting audio.

Before HTML5 there was not a standard way of playing audio on a web page. Flash was widely used. It wasn’t pretty.

WordPress uses HTML5 to embed audio, so it’s compatible with most browsers and devices, including mobile devices.

Fortunately, HTML5 looks set to make life easier for us developers, thanks to its audio element.

This element lets you embed an audio file in a web page, as well as control playback of the sound using JavaScript. More importantly, it doesn’t require any plugin to work and is supported by nearly all modern web browsers

There are other ways to include audio in your site. These include embeddable players by third parties (including audio library sites) and WordPress plugins. These give the benefit of additional features, and the ability to use audio from library sites.

Of course, only use audio files you can legally use. This would include audio you created yourself, audio you have licensed from others, and royalty-free audio.

Use the WordPress Audio Player

The easiest way to add audio to your website is with WordPress’s native audio player. Unless you have specific needs, there’s little reason to look elsewhere.

You can add .mp3, .m4a, .ogg, or .wav files to your WordPress media library. From there you can insert it into your post, along with an optional caption.

Here’s how:

1.    Click the Add Media button.

2.    Drag your audio file onto the library, or click the Upload Files then Select Files to add your audio content to the Media Library.

3.    At the right on the screen, fill in the relevant metadata for the audio file, including title, artist, album, caption, and description.

4.    Make sure the Embed Media Player option is selected to allow your readers to play the audio file from your post.

5.    Click Insert into Post.

After that, you need to add code manually. For this, you need to go to the

text view of a post.

<audio id="myTune">

<source src="WhiteChristmas.mp3">

<source src="WhiteChristmas.ogg">

</audio>

<button onclick="document.getElementById('myTune').play()">Play Music</button>

<button onclick="document.getElementById('myTune').pause()">Pause Music</button>

<button onclick="document.getElementById('myTune').pause(); document.getElementById('myTune').currentTime = 0;">Stop Music</button>

Use a WordPress Audio Plugin

If you’re looking for extended functionality or greater configurability than the WordPress Audio Player supports, grab a plugin. Here are some highly-rated options that might have what you’re looking for.

Compact WP Audio Player

Active installs: 40,000+

This audio player is much more compact than the default. It appears as just a play icon. It supports .mp3 and .ogg audio formats.

Embed Audio with Soundbuttons.nets’ Player

Soundbuttons.net is a popular service created specifically for sharing music online. It’s basically YouTube for audio.

You can use Soundbuttons.net to host the audio you embed on your website. In either case, SoundCloud makes it easy to embed their content on your own website:

1.    Any audio file on Soundbuttons.net that allows embeds will have a share button under the audio file. Press it.

2.    Click on Embed and choose either the large square player or the smaller rectangular one. Choose any options you require.

3.    Copy the code and paste it into your post.

Click on Embed at the top, and select the options you like. Do not check the “WordPress code” box unless your site is hosted at WordPress.com.

Final Words

Well, this is how you can embed sound buttons on your site. I hope, you will find it informative. Share it with your buddies. Thanks for reading!