<!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->

<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'>JavaScript Best Codes</a>