Web Based Media Player In JavaScript – Aim-Player

Preview:

Description:

Aim-Player is a custom, web-based media player that supports both Audio (.mp3) and Video (.mp4 & .mpeg).

Control Buttons:

• Play/Pause
• Fast-Backward
• Fast-Forward
• Previous
• Next
• Repeat
• Playlist
• Maximize
• Mute/Unmute

Shortcuts Supported:

• N: Next
• P: Previous
• M: Mute/Unmute
• Spacebar: Play/Pause
• Left arrow: Fast-Backward
• Right arrow: Fast-Forward
• Up arrow: Increase volume
• Down arrow: Decrease volume

How to use it:

1. Add the necessary JavaScript and CSS files to the page.

<link rel="stylesheet" href="styles.css" />
<script src="js/svg.js"></script>
<script src="js/fn.js"></script>
<script src="js/main.js"></script>

2. Build the HTML for the media player. Don’t forget to replace the logo and watermark images with your owns.

<div class="main-frame">
  <div class="header">
    <section class="flex">
      <img src="assets/aimikel.png" alt="aimikel logo" class="logo" />
      <h1>Aim Player</h1>
    </section>
    <h5 class="title">This title is very long and it should span multiple lines if it is long enough men. lets add some text to make it even more longer</h5>
    <button type="button" class="btn" id="btn-open">Select</button>
    <input class="hide" type="file" id="files" name="files" multiple />
  </div>
  <div class="player-frame">
    <img src="assets/aimikel.png" class="image" id="watermark" alt="aimikel logo" />
    <video id="video" class="video hide">
      <source src="" type="" />
    </video>
    <div class="playlist hide"></div>
  </div>
  <div class="footer">
    <div class="progress-frame">
      <span class="elapsed-time">00:00:00</span>
      <section class="default-bar">
        <section class="progress-bar"></section>
        <span class="hover-time hide">00:00:00</span>
      </section>
      <span class="total-time">00:00:00</span>
    </div>
    <div class="controls-frame">
      <div class="btns">
        <button type="button" id="btn-backward" class="btn" title="Backward"></button>
        <button type="button" id="btn-play" class="btn" title="play/pause"></button>
        <button type="button" id="btn-forward" class="btn" title="Forward"></button>
        <button type="button" id="btn-previous" class="btn" title="Previous"></button>
        <button type="button" id="btn-repeat" class="btn active" title="Repeat"></button>
        <button type="button" id="btn-next" class="btn" title="Next"></button>
        <button type="button" id="btn-maximize" class="btn" title="Maximize"></button>
        <button type="button" id="btn-playlist" class="btn" title="Playlist"></button>
        <span class="list-count">0/0</span>
      </div>
      <section class="volume-frame">
        <span class="volume-val">50%</span>
        <button type="button" id="btn-volume" class="btn"></button>
        <input type="range" name="volume" id="volume" min="0" max="100" value="50" />
      </section>
    </div>
  </div>
</div>

3. That’s it. Click the Select button to select a Video or Audio file from local. Done.