Use the Embed Sound button on your Blog in 2021

In some blogs, you might have noticed that once when you land on it, some music suddenly starts to play.

It may be pleasant or annoying; whatever it is they add it to grab their visitor’s attention.

How about you would you like to add nice instrumental music to your blog background? It’s simple, here we will see how to add background music or sound to the Blogger blog.

You have the option to enhance your Blogger site with all kinds of content, including audio clips.

With audio, your visitor can hear the sounds that help support the content of your page. If you're a musician, for instance, you can publish your latest song.

Blogger gives you access to the "HTML/JavaScript" gadget, which makes it convenient to add the code that publishes your media.

After you upload your file to a free Internet host, use the "Layout" page on Blogger to put the audio clip where you want it.

There are many ways to add background music to your blog but here we will show you the easy one.

By using <audio> tag you can embed a music player with visible controls; make a sound to play at once when the website loads and add background music that plays endlessly with controls hidden. Alright, let’s see how to do this.

Supported Audio File Formats in WordPress

WordPress uses an HTML5 audio tag to embed audio files. It is compatible with most modern devices and works particularly well for mobile devices. HTML5 audio tag supports MP3, OGG, and WAV file formats.

MP3 is the most commonly used and widely supported format for audio files, and we recommend you to use it whenever possible.

How to add background music or sound to Blogger blog

First, before adding background music to your blog you must have a music file to call in. Just in Google, search for royalty-free music and you will see many sites offering free music downloads.

Select any suitable background music for your blog or if you have already got one, then just upload it to any online storage sites there are hundreds of best free file hosting servers. Hope your music file is ready; now move on to the Blogger part.

Log in to your Blogger blog and then choose the blog where you wish to add your background music. Next, go to Layout, choose “add a gadget”, select HTML/JavaScript gadget and then add the below line.

<audio autoplay loop>

<source src="http://yourmp3-file-location.mp3"></source>

</audio>

Now in source src=”your text” add your music file location, save the gadget and then view your blog where you can hear the music playing, but the controls are hidden.

  In the above code, “autoplay” starts to play the sound as soon as it is ready and “loop” will make the audio repeat whenever it is finished.

If you would like to show audio controls for your visitors then just add controls inside the audio tag just like this.

<audio controls autoplay loop>

<source src="…"></source>

</audio>

If you wish to add a music player or make music to play in just a single post or page, then you can add it only on that particular page.

The audio player control doesn’t fit your blog sidebar, say you want to increase the player width. To do so add an id inside the tag like this

<audio id=” player” controls autoplay loop>

then add a CSS like this

#player {

width: 100%;

}​

Posting audio from Soudbuttons.net

Audio hosting websites like Soundbuttons.net make it easy for you to embed audio files in your web pages and blogs.

Just upload your file - like an MP3 song or an audio podcast - to any of these sites and they’ll provide the HTML embed code that you can copy-paste in your web template. Simple!

Soundbuttons.net is a social sound platform where anyone can create and share sounds.

Recording and uploading sound to SoundCloud lets people easily share them privately with their friends or publicly to blogs, sites, and social networks.

Adding sounds to Blogger with HTML

First, find a SoundCloud player you want to add to Blogger. If the player is on soundbuttons.net click on the Share button. If it's on another website, click on the "</>" icon.

This action will make the share options appear. Select and copy the text in the embed field.

Once the embed code has been copied, you're ready to paste it into a Blogger post. While editing the blog post, make sure you're using the "HTML" view.

Paste the code where you'd like the player to appear. You've now added sound to your post! Hit Preview or Publish to see the results.

Embed Content From soundbuttons.net with a URL

You can embed video or audio on your blog by simply entering the URL for a web page on a trusted service or an item in your blog's Media Library.

Visit soundbuttons.net and locate the sound button, audio, or media files you'd like to embed or upload your own media.

Tap on the download arrow

A new screen will appear with various sharing options such as share on Facebook, Twitter, WhatsApp, and a link arrow.

Tap on the link arrow to Copy the URL:

Go to your blog's Media Library and click the thumbnail for the media to embed. In the Attachment Details pop-up that opens, select the URL, then go to Edit > Copy.

Note: Do not use the Insert Media button in the Editor toolbar to insert video, audio, or PDFs; it will only create a text link and will not embed the media on the page.

On the Add/Edit screen for a post or page on your blog, make a new paragraph (hit Enter/Return on your keyboard) and go to Edit > Paste to insert the URL. WordPress will automatically embed the video and provide a live preview in the visual editor.

Note: The URL must be in its own paragraph. (Press Return/Edit again if you will add content below the video.)

To preview the page before publishing, click Preview, or to save and publish the page, click Publish or Update.

Final words

Well, this is all about How to Embed a Sound button on your Blog. That’s it! Hope that helped you to add background music to your blog. Share it with your buddies.

Thanks for reading!