Customize MediaElement.js audio player

Question

i am trying to customize the MediaElement.js audio Player. All i need is to play a mp3 file but i need bigger buttons (play,mute).

I tried a lot with the mediaelementplayer.css but nothing work. Don't get it how it works.

Or if anyone have another easy idea for playing mp3 with html. Lot of Player out there was updatet a lot of years ago. Thanks!

Answer 1

The HTML element <audio> is used to play an audio file on a web page. Add a button and with simple JS you will get the result.

For example:

<script>
var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  isPlaying ? myAudio.pause() : myAudio.play();
};

myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};
</script>

<audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
<button onClick="togglePlay()">Click here to hear.</button>