How to add audio in HTML 2024 (Blogger and WordPress)

Assalamu Alaikum Dear Reader, Hope you are well. Many of you want to add audio to Blogger or WordPress website, but don't know how to add audio to Blogger or WordPress website. In today's article, you will learn how to add audio and get the HTML code of the audio widget. So I hope you read the entire post carefully.

A Beginner's Guide to Adding Audio in HTML 2024 for Blogger and WordPress

In the dynamic world of web design, incorporating audio elements into your website can significantly enhance user experience. Whether you're a blogger using Blogger or a website owner on WordPress, adding audio to your content can be a game-changer. In this guide, we'll walk you through the simple steps to seamlessly embed audio in your HTML code while ensuring friendliness for search engines like Google and Bing.

How to add audio in HTML 2024

Audio can be added through HTML for blogger or WordPress websites. First, you need to select an audio that you want to add to the blog. Below is a complete guide on how to add audio to blogger website through HTML.

Upload your audio file to Google Drive. The file must be an MP3/WAV file.
After uploading it to Google Drive, create a direct link to your audio file.
Make your file public in Google Drive or share with anyone.
Now copy the final link.
Then replace the link of your desired audio file in the audio HTML code given in our article.
Now put the HTML where you want to add audio to your blogger website or WordPress website.
Now publish your code, and you will see the audio added.

In this way, you can easily add one or more audios to Blogger website or WordPress website through HTML code.

HTML Code For Audio 2024

You can copy the code given below and replace the link of your audio file and use it.

DIV Code: <audio controls>
<source src="YOUR_AUDIO_FILE_DIRECT_LINK" type="audio/mp3">
Your browser does not support the audio element.
</audio>

With Style Code: <title>Stylish Audio Player</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.audio-container {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 100%;
max-width: 400px;
margin: auto;
}

audio {
width: 100%;
display: block;
}

.audio-info {
padding: 10px;
text-align: center;
background-color: #333;
color: #fff;
}

.audio-info h2 {
margin: 0;
font-size: 1.2em;
}

.audio-info p {
margin: 5px 0;
font-size: 0.8em;
}

/* Custom Play Button */
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-start-playback-button {
display: none!important;
}

.play-button {
display: inline-block;
background-color: #4CAF50;
color: #fff;
padding: 8px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s;
}

.play-button:hover {
background-color: #45a049;
}
</style>

<div class="audio-container">
<audio controls>
<source src="https://example.com/path/to/your/audio/file.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>

<div class="audio-info">
<h2>Now Playing</h2>
<p>Your Audio Title</p>
</div>

<button class="play-button" onclick="playPause()">Play</button>
</div>

<script>
function playPause() {
var audio = document.querySelector('audio');
var playButton = document.querySelector('.play-button');

if (audio.paused) {
audio.play();
playButton.textContent = 'Pause';
} else {
audio.pause();
playButton.textContent = 'Play';
}
}
</script>

Save the code so that you can easily find it again if you need to add any audio later. This is the same code used all the time when adding audio.

How to Make HTML Audio SEO Friendly

To make your audio content more search engine-friendly:

Descriptive File Names: Ensure your audio file has a descriptive name that reflects the content.
Alt Text: If possible, add alt text to describe the audio content.
Keywords: Integrate relevant keywords in the surrounding text to enhance search engine visibility.

Our last word

Dear readers, I hope that by reading today's article you have learned how to add audio to blogger or WordPress website through HTML code. If you have any questions related to today's post, do not forget to comment and let us know. You can also visit our website regularly to get various articles on new coding topics, thanks.