Create Audio Player using HTML5

You can add and play audio files on your website using The <audio> tag. This is one of the HTML5 elements which create a audio control and play audio files to a web page. Since not all browsers support all audio formats, the audio file is encoded using special codecs.

The current HTML5  support, most commonly used audio formats like ogg, mp3 and wav.

Syntax

The <audio> tag comes in pairs. The content is written between the opening and closing </audio> tags.
<audio>
<source src="URL">
</audio>

Audio Tag Atrributes

Controls-

Displays the audio control panel (start button, scroll, volume control).

Preload –

This attribute specifies that the audio will be loaded at page load, and ready to run.

[auto]- Playback starts after the page is loaded.

[none] – Playback starts only after clicking the corresponding button.

ControlList-

Using the controlsList attribute, developers can enable/disable the visibility of the playback speed control and download option.

Autoplay-

This Boolean attribute will automatically begin on page load.

Loop-

Repeats continuously the audio file from the beginning after its completion.

Muted-

Mutes the sound when the audio file is played.

Src [URL]-

Specifies the path to the audio file.

The following example show you a simple attractive audio player in your browser. Just copy and paste whole code inside body tag and your player is ready.

<div class="controlrow">
<audio id="plymusicid" controls src="https://www.ads.plugintutor.com/audio/PTIntro.wav" preload="auto" controlslist="nodownload noplaybackrate"></audio>
</div>

<style>
audio::-webkit-media-controls-panel {
background-color: #8f9190;
}
audio::-webkit-media-controls-mute-button {
background-color: #B1D4E0;
border-radius: 50%;
}
audio::-webkit-media-controls-play-button {
background-color: #B1D4E0;
border-radius: 50%;
}
audio::-webkit-media-controls-current-time-display {
color: #01FCFC;
}
audio::-webkit-media-controls-volume-slider {
background-color: #B1D4E0;
border-radius: 25px;
padding-left: 8px;
padding-right: 8px;
}
#plymusicid{
width:100%;
}
.playing {
background-color: #C00 !important;
}
</style>

<script>
$('#plymusicid').on('playing', function() {
// $('.controlrow').addClass('playing');
//$(document.body).addClass('playing');
//$(body).toggleClass('playing');
document.getElementsByTagName('body')[0].className += 'playing';
}).on('ended pause suspend error', function() {
$('.controlrow').removeClass('playing');
});
$('.controlrow').on('click', function() {
$('#plymusicid')[0].play();
})
</script>

Free to use this sound file anywhere you want to add – https://www.ads.plugintutor.com/audio/PTIntro.wav