All geek questions in one place

How to create a custom music player based on an audio tag using HTML, CSS and JS

I am trying to create a custom music player without using the "controls" tag inside the sound tag. First of all, I want to create something similar to an SCM music player. I will not use the one provided by SCM, because it somehow uses a large amount of space when adding to my site, I did not understand how to hide / show it, since it is in the script tag and this really affects the speed Y -Slow.

Here is an image of what I would like to create:

SCM Music Player

And this is what I have so far: https://jsfiddle.net/e13gs8qg/6/ (updated)

HTML: (updated)

<audio id="player" class="mediaplayerclass"> <source title="Fruity Loops Own Track Copy" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3" /> <source title="Fruity Loops Own Track Copy 2" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3" /> </audio> <div class="playermenuwrapper"> <button id="previoussong" class="previoussongclass"> Previous </button> <button id="playpause" class="playpauseclass"> play </button> <button id="nextsong" class="nextsongclass"> Next </button> <div id="songtitle" class="titleclass"></div> </div>

CSS

 .playermenuwrapper { text-align:center; margin: 0px auto; max-width:100%; } .previoussongclass { display:inline-block; width:80px; } .playpauseclass { display:inline-block; width:80px; } .nextsongclass { display:inline-block; width:80px; } .mediaplayerclass { display:block; width:150px; height:50px; margin: 0px auto; } .titleclass { display:inline-block; text-align:center; margin: 0px auto; width:250px; }

JS: (updated)

 window.player = document.getElementById('player'); var playpause = document.getElementById('playpause'); var songtitle = document.getElementById('songtitle'); changesongtitle(); player.volume = 0.3; playpause.onclick = function () { if (player.paused) { changesongtitle(); player.play(); playpause.innerHTML = 'pause'; } else { player.pause(); playpause.innerHTML = 'play'; changesongtitle(); } } function changesongtitle() { var songtitle = document.getElementById('songtitle'); if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3") { songtitle.innerHTML = "Fruity Loops Own Track Copy"; } if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3") { songtitle.innerHTML = "Fruity Loops Own Track Copy 2"; } }

I looked at a lot of questions about stackoverflow on this, but I still haven't found the answers to what I'm trying to do.

  • How to get the header of the source playback file? (Updated)

  • How can I encode the "left" and "right" buttons to modify the source files?

  • How to create a volume slider?

  • How to create a timeline of the current duration of the reproduced sound?

  • And finally, how can I display the current time and the total duration of the playback sound?

How to use the current properties of time and duration in this.

+5
source share
1 answer

I understand that you want to create a special library for your specific use case. I suggest you try Mediaelement.js . It has many features, and also works in almost all browsers. In addition, in addition to this library, you can add several things, such as changing songs based on the next and previous, as this library is open source.

Even I used it and created some custom functions on top of it. https://github.com/hkasera/mediaelement-markers

But first of all, you need to understand how HTML5 audio or video works. To do this, I suggest you read the following articles:

+1
source

Source: https://habr.com/ru/post/1238331/

More articles:


All Articles