Javascript Code: Music on web ( Mid, Mp3, Wma )

You can use music on your website to attract the attention of your website visitors. In this way by entering the website, a music is played and for this reason, the audience's attention is attracted more. In addition, you can use this code not only to play music on your websites but also to let users download it. In addition to the possibility of playing music, it is also possible to move the music back and forth, rewind it, change its playing speed and mute the sound. Enjoy!

<!-- this script got from www.javascriptfreecode.com - Coded by: Krishna Eydat -->

<style>
.container {
    width: 800px;
    margin: 30px auto;
}

.mejs__container {
    margin-top: 10px;
}

.mejs__controls {
    display: block;
}

.mejs__controls, .mejs__container {
    background: none !important;
}

.mejs__time {
    color: #777;
    font-weight: normal;
}

.podcast {
    background: #f0f0f0;
    padding: 30px;
    border-radius: 3px;
}

.podcast__episode_title {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 0;
    color: #333;
}

.podcast__title {
    margin-top: 10px;
    text-transform: uppercase;
    font-size: 11px;
    color: #555;
}

.podcast__title i {
    font-style: normal;
    font-weight: normal;
    text-transform: capitalize;
    margin-left: 10px;
}

.podcast__meta {
    background: #ddd;
    margin: 40px -30px -30px -30px;
    padding: 0 30px 30px 30px;
    display: flex;
    justify-content: space-between;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.podcast__meta .artwork {
    margin-right: 0;
    transform: translateY(-70px);
}

.podcast__meta .artwork > img {
    border-radius: 3px;
    width: 150px;
    height: 150px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: -80px;
}

.mejs-prepended-buttons {
    display: flex;
}

.mejs-appended-buttons {
    display: flex;
    justify-content: space-evenly;
}

.mejs__play > button {
    background: transparent url("https://www.javascriptfreecode.com/files/mediaplayer-sprite-gray.svg") no-repeat;
}

.mejs__pause > button {
    background: transparent url("https://www.javascriptfreecode.com/files/mediaplayer-sprite-gray.svg") no-repeat;
    background-position: -20px 0;
}

.mejs__mute > button {
    background: transparent url("https://www.javascriptfreecode.com/files/mediaplayer-sprite-gray.svg") no-repeat;
    background-position: -60px 0;
}

.mejs__unmute > button {
    background: transparent url("https://www.javascriptfreecode.com/files/mediaplayer-sprite-gray.svg") no-repeat;
    background-position: -40px 0;
}

.mejs-skip-back-button > button,
.mejs__skip-back-button > button {
    background: transparent url("https://www.javascriptfreecode.com/files/skipback.svg");
}

.mejs-jump-forward-button > button, .mejs__jump-forward-button > button {
    background: url("https://www.javascriptfreecode.com/files/jumpforward.svg") no-repeat;
}

.mejs__button > button {
    color: #555;
}

.mejs__horizontal-volume-slider {
    display: none !important;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelementplayer.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/speed/speed.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/skip-back/skip-back.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/jump-forward/jump-forward.min.css'>


<div class="container">
  <div class="podcast">
    <h3 class="podcast__episode_title">Javascript Free Code</h3>
    <h5 class="podcast__title">
      <i>Music Player</i>
    </h5>

    <div class="podcast__meta">
        <audio controls autoplay id="player">

            <source src="https://www.javascriptfreecode.com/files/track.wma" type="audio/x-ms-wma">
            <source src="https://www.javascriptfreecode.com/files/track.mp3" type="audio/mp3">
            <source src="https://www.javascriptfreecode.com/files/track.midi" type="audio/mid">
            Your browser does not support the audio tag.
        </audio>
      <a href="#" class="artwork">
 <img src="https://www.javascriptfreecode.com/files//playerflower.webp" alt="">
</a>
    </div>
  </div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelement-and-player.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/skip-back/skip-back.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/jump-forward/jump-forward.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/ivorpad/mediaelement-changespeed/changespeed.js'></script>
<script>
var myAudio = document.getElementById('player');

if (myAudio.canPlayType('audio/mp3')) {
    myAudio.setAttribute('src', 'track.mp3');
} else if (myAudio.canPlayType('audio/x-ms-wma')) {
    myAudio.setAttribute('src', 'track.wma');
}
else if (myAudio.canPlayType('audio/midi')) {
    myAudio.setAttribute('src', 'track.midi');
}

myAudio.play();
"use strict";

const options = {
    defaultSpeed: '1.00',
    speeds: ['1.25', '1.50', '2.00', '0.75'],
    loop: true,
    
    skipBackInterval: 15,
    jumpForwardInterval: 15,
    features: [
        "playpause",
        "progress",
        "current",
        "duration",
        "skipback",
        "changespeed",
        "volume",
        "jumpforward",
    ]
}

new MediaElementPlayer(
    document.querySelector("audio"),
    options
);

// Separate the audio controls so I can style them better.
(() => {
    const elementTop = document.createElement('div');
    const elementBottom = document.createElement('div');
    elementTop.classList.add('mejs-prepended-buttons');
    elementBottom.classList.add('mejs-appended-buttons');

    const controls = document.querySelector('.mejs__controls');
    controls.prepend(elementTop);
    controls.append(elementBottom);

    const controlsChildren = Array.from(controls.childNodes).filter(v => v.className.startsWith("mejs_"));

    controlsChildren.slice(0, 3).forEach(elem => {
        elementTop.append(elem)
    });

    controlsChildren.slice(3, controlsChildren.length).forEach(elem => {
        elementBottom.append(elem)
    })
})()
</script><a target="_blank" href="https://www.javascriptfreecode.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">Javascript Free Code</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Tags: effect

Javascript Best Codes

Javascript Code: Music on web ( Mid, Mp3, Wma )

Links