Blog Tips--Add music to blog post (plus create your own website)

UPDATE:

No, you're not going crazy. That's music auto playing in the sidebar. At least temporarily for the next few days for demonstrative purposes. Click the pause button if you don't want to hear this song play or keep looping.

Music: The Entertainer by Scott Joplin




This is a bonus update to show you how to add music in the background.

Real simple. It's a whole lot easier than this post looks. You need two things:

(1). An audio control tag (see step 3. for script below)
(2). The mp3 URL (the address/location/path of the website hosting your mp3).

You need a site to host the mp3 to make this work. Don't worry. See phase 3 of the long post below to create your website to host the mp3 and obtain the address. It's easy.

The steps to create an auto playing and looping background music:

1. Go To Blogger Dashboard >> Layout.
I go to the sidebar because it's easy for demonstration purposes.
2. Click On “Add Gadget” >> HTML/Javascript.
3. Now Copy the Below script and paste in HTML/Javascript Section.

<audio controls>
<source src="PASTE-MP3-URL-HERE.mp3"></source>
</audio>

Make sure to paste in the mp3 URL (location/address/path) in between the quotation marks on the spot marked PASTE-MP3-URL-HERE.mp3

Be sure the address ends with .mp3

4. Click Save. Go to blog to see if it worked. Advice: Use smaller files that'll load and play easily. For example, The Entertainer playing in the side bar is about 2.54MB in size. The larger the mp3 file, the longer it takes to load and play.

5. Options: I included controls in the audio tag to give readers a choice to stop or play the music.

To create an auto playing and looping background music, add autoplay and loop to the tag:

<audio controls autoplay loop>
<source src="PASTE-MP3-URL-HERE.mp3"></source>
</audio>

I can also place the audio autoplay tag in the sidebar to make it easy to find and control the music. The music will play so long as you stay on the blog, no matter what post you go to.

To keep the music auto playing and looping in one particular blog post, post the proper audio tag in the HTML mode of Creating a post. Stay and work in HTML mode only! If you switch to Compose, it'll ruin your audio tag! Compose mode automatically transforms your tags, rendering them useless and broken. Stay in HTML mode! Work in HTML mode, and save in HTML mode. Publish in HTML mode.


More Bonus Sidebar Updates:

I've also updated Blog Tips--formatting comments to make it easier to create Italics , Bold, or Links in blogger comments.

And I've updated Blog Tips--fun graphics so you can just copy and paste which fun design you want to show up in comments, i.e. cake

Copy and Paste this in comments:

<a><b>._._._._._._.</b></a>
<b>[*O*O*O*O]</b>
<a><b>[*O*O*O*O]</b></a>

To get this:

._._._._._._.
[*O*O*O*O]
[*O*O*O*O]


Enjoy!

ORIGINAL POST FOLLOWS:

I've been looking for a way to load music into my blog posts. Just music, not video clips. In Blogger, there is a movie clapperboard/slate board icon in the Compose menu. It sits between the postcard/picture icon for adding fotos to the blog and the smiley face icon for special characters.

That clapperboard icon is useful for uploading video files to your blog post from your computer or other site, like YouTube. That's fine if you want to load music videos. But I don't want to load any videos, I only want to upload music clips--mp3s--to the site. This post is only about adding music (NOT YouTube or other sites' videos) to your blog posts. Just music, not videos.

While I like finding and sharing awesome videos from YouTube or other sites, it does get frustrating trying to find a quality video to share, only to have it disappear or removed from the site, therefore, leaving an ugly error space on the blog post. I'm tired of losing videos and having music disappear from the blog. It feels like censorship, and I don't like it! Now, I just want a way where I can have the music be a part of the blog without ever worrying about it being erased or removed. I want to keep the music as a part of the blog for as long as I have the blog! Music is an essential part of life, and it is fundamental in some of the blog posts I like to create and share.

Don't let the size of this post scare you. It only appears long because I'm going to walk you step by step on how to add music (mp3s) to your blog post. Once you've gone through it the first time, it'll get easy. Because you've all ready done the hard part: Setting up a website to host your mp3s. After a few tries, you'll become adept at adding music to your blog posts.

This is a sort of technical, long post. Stop here if you've no interest in adding just music clips (not videos) to your blog post. If you'd like to know how to add music and keep it on your posts for as long as you have your blog, then read on. This post is going into the sidebar under Helpful Hints for future reference and easy access.

Once upon a time, Blogger offered an embedded mp3 player option. That was very helpful and made adding music to the blog easy. But then they removed it for some reason. Naturally, that caused a lot frustration and disappointment, because now, it is a whole lot harder to add music to the blog.

But the possibility exists to add music clips to the blog in at least two ways:

1. Using an embedded mp3 player--from a third party.

2. Utilizing the unique properties inherent in blogger that allow for the addition of music clips using html tags.

I didn't want to deal with finding a compatible mp3 player. I wanted something easy and simple. So I opted to research for the right html tags I would need to add music clips to my blog posts. It wasn't easy. And there are many differing opinions and methods. Thankfully, people who are experts at this led me to discover the necessary html tag to add music clips (mp3s) to my blog post. This is the music clip audio tag:

<audio controls="controls" height="50px" width="100px"> <source src="PASTE-MP3-URL-HERE.mp3" type="audio/mpeg"></source> <embed height="50px" src="" width="100px"></embed> </audio>

See where it says "PASTE MP3 ADDRESS HERE.mp3"? That is where you'll paste in the mp3's address (location/path) from the site that is hosting the mp3. You need a hosting site for the mp3. I'll show you how to create one.

You will need to save this audio tag in a place where you can easily copy and paste it into your blog post when the time comes. The easiest thing would be to copy it from this page. I'm leaving this page up, in the sidebar under Helpful Hints, so if you need to quickly copy and paste the huge audio tag above to use in your post, you know where to find it. Or you can copy and paste it into Note and save it in your files, so you'll have access to it from your computer or if you find it more convenient than coming back to this page. Do what is easiest for you to save and access the audio tag.

I'll admit that it was very confusing and time consuming sorting through all the available information on adding music clips to a blog post. There are differing opinions and methods. Eventually, I was able to craft from various sources and through trial and error and experimentation a simple way to add music to blog posts. It requires three things:

1. The music in mp3 format
2. The audio tag to add music to your blog post
3. A site to host the mp3 file

To add a music clip to the blog post, it is necessary to work in HTML mode, NOT Compose.

This is my advice, based on experience and experimental results, on the simplest way to add music to your blog post. Here are the three phases to adding music to your blog post:

(Phase 1). Create post.

Type out your post and make a note or mark where you want to place the music clip in your post. If you're adding a music clip as part of a larger blog post, type out the blog post first. It's ok to type the post (or copy and paste it) in Blogger's COMPOSE mode at this time. In the location where you want the music clip to appear, type in the artist name and music title. Then underneath the artist name and title, type in TAG.

TAG does not mean anything. It is just a place holder. That is where you will paste in the audio tag with the mp3 info and address to add the music clip to your site. Once you've typed out your post (or copied and pasted the post) into blogger, click SAVE to save your work.

Under Post Settings, click on Options. Under Line breaks, choose Press "Enter" for line breaks. Click Done. This will make it easier to work in HTML mode.

Save post then switch from COMPOSE mode to HTML mode before adding music audio tag (phase two and three). DO NOT SWITCH BACK TO COMPOSE MODE OR YOU'LL RUIN THE AUDIO TAG, causing the music clip to fail. If you need to edit your blog text or make changes, do so in HTML mode, and save in HTML mode.

(Phase 2). Add audio tag to blog post to add music (mp3) to the post.

In HTML mode, add/paste in audio tag (that huge, scribble from above identified as the music clip audio tag) to replace the place holder TAG. Just highlight TAG, then delete/replace it by pasting the audio tag you copied. Click Save.

DO NOT CLICK BACK TO COMPOSE! The COMPOSE mode will automatically convert your audio tag, ruining it, causing the music clip to fail and NOT play on your blog. So remember. Once you click into HTML mode, DO NOT CLICK BACK ON COMPOSE MODE!!! So any further edits or changes to your post have to be done and saved in the HTML mode, and Never go back to COMPOSE or you'll ruin the audio tag. Save your work in HTML mode.

If you do accidently click back to COMPOSE mode and ruin the audio tag, click back to HTML mode and erase the mangled/ruined audio tag. You're going to have to paste in a brand new audio tag in this space. Don't forget to stay in HTML mode and click save in HTML mode. Do not close this window. Leave this window with Blogger post still in HTML mode while you open or start another new, browser window.

(Phase 3). Copy mp3 location/address/path from host site. This is how you create your own website.

Now open a new window. Go to Google home/search page. You should still be signed in from your Blogger account that you used to create your new post. Now I'll show you how and where to create a hosting site to upload your mp3. Then you'll copy the address of the mp3 to paste in the audio tag in the blog post.

In Google homepage, type in: Sites

That should lead you to sites.google.com; if you have a Blogger/Gmail/Google account, you have a sites account, or the access to create one. The site will only hold 100MBs, just enough for a CD's worth of music--about 12 or more, depending on the size of the mp3 files. I'm showing you how to create the simplest, easiest website to host your files. You can explore other template options later if you want a more specific or specialized website from the many template options. For now, just follow the steps outlined below to create a simple website to host your files.

Sign in if you need to. In the bottom left of the page, make sure you are in Desktop mode.

1. Click Create button in top left of page.
2. Click on Blank template.
3. Type in your site name, i.e., My Blog Name Music
4. In Theme menu, click on Iceberg.
5. Click on box I'm not a robot. Solve captcha if necessary.
6. Click Create

7. Go to your new site by clicking on it.
8. Click on blue Share button in upper right corner.
9. Choose option: Anyone who has the link can view. Save.
10. On left side of menu, click on Page Template.
11. Click on File Cabinet.
12. Click on Set as default.
13. Click on site name to go back to homepage.
14. On the top menu, click add page (icon with + sign on page)
15. Type page name, i.e. Music
16. Make sure template is set to File cabinet.
17. Make sure to select Put page on top level. Click OK.
18. Back to site homepage, click on Gear icon (top right) for drop down menu and Click on Edit site layout.
19. Click to highlight only Header and Horizontal Navigation. Click to de-highlight Sidebar. Click Close.
20. Click Gear and click Edit site layout again.
Click home tab to highlight row. Configure Navigation window should pop open. Click Add Page.
Then a window titled "Select page to add" should pop open. Under site map, highlight your newly created page and click OK.
Under Style, click on Tabs. Then Click OK.
21. Click on your newly created page's tab.
Click Add File to upload file from your computer or device.

*Your music file should be in mp3 format. If not, there are several programs to convert your CDs to music files that can be saved as mp3s on your computer or device. Most computers come loaded with such programs. Use or download a program you trust to save your songs into mp3s.

If you have a Windows computer, Windows Media Player is included by default. Go to this site here to follow easy instructions on converting your CDs into mp3s:

https://www.online-tech-tips.com/computer-tips/how-to-rip-an-audio-cd-and-convert-wma-files-to-mp3-for-free/

22. Once the music mp3 has uploaded, click on the Gear and choose Manage site from the menu.
23. Click on Attachments.
24. Click on blue Version or Revision for the chosen mp3.
25. On top of page, Right Click on blue mp3 name and copy link. This is your mp3's address/location/path.

26. Go to the other open window with your Blogger post in the HTML mode.
Find the audio tag, highlight PASTE MP3 ADDRESS HERE.mp3, staying inside the quotation marks. Then delete/replace PASTE MP3 ADDRESS HERE.mp3 by pasting the link you copied from your site. Click Save.
27. This step is optional: Creating a link to open/download the mp3. It's useful when people can't play the music clip or want to open/download the clip using their own media player.

Highlight the artist and song name. Click Create Link icon. Paste mp3 address/location/path into location box. Click OK to save. This way, if the clip does not load or play, clicking on the artist name or song title can open or download the mp3 if that's what the reader wants.

28. Click Save. Stay in HTML mode. Close post. Back on Blogger, click Preview of post to see if the post will display with the music clip as a black bar under the artist name and song title. The only way to see if the clip will load and play is to Publish the post.
29. If satisfied with Preview, Publish post. Test out the clip and link. If the clip won't load or play correctly, you may have to go back to HTML edit mode, erase the audio tag, and replace it with a new audio tag, and add the mp3 address again in the appropriate tag space. Save in HTML mode. Publish. Test clip again. It should be working if you did all the steps correctly.
30. If you're still having problems, check to make sure you copied the audio tag correctly. Make sure you have the right mp3 address from your site. Make sure your Google site setting allows anyone with a link. If you're still having problems, you may have loaded too many mp3s to the post, creating huge data the servers or mobile device users cannot support nor access. Keep it simple.

After troubleshooting, hopefully, the audio tag works properly and you now have music to enhance your blog.

From now on, if you want to add just music clips to your post, all you have to do is:
1. Create post and type TAG where you want the music clip to appear. Save post then go to HTML mode.
2. In HTML mode, replace TAG with actual audio tag.
3. Upload mp3 to your site. Then copy mp3 address/location/path from site. Paste into appropriate audio tag spot. Optional: Create open or download link using artist name or song title.
4. Save in HTML mode. Close post. Preview. If satisfied and to see if clip works, Publish post.

That's it. Much easier after the first time. And you can save yourself time by uploading to your site before hand any music you'll use in your posts. Just remember, the site only holds about 100MB of data (at least 12 songs, depending on mp3 size). So you might have to create more sites if you have more songs to play in future posts.

If I can help in any other way or if you have useful tips and advice to share, please do so. I will gladly take any good advice on other easy methods to load music clips to the blog post. One last word of advice: Don't try to load too many songs in one post. It'll take the page longer to load and makes it difficult for mobile device users to access and enjoy your new musically enhanced blog posts.

A very special thank you to all you amazing readers who shared feedback when I was experimenting with adding music to the site. Your feedback was very helpful in troubleshooting and understanding the best, simplest way to add music to the blog post. Thank you for your welcomed and highly valued participation.

I hope this information helps you add music to your blog posts. Enjoy!