Web Based Media Player In JavaScript – Aim-Player

Category: Javascript | March 1, 2021
Views Total:933 views
Official Page:Go to website
Last Update:March 1, 2021


Web Based Media Player In JavaScript – Aim-Player


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>
    <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 class="player-frame">
    <img src="assets/aimikel.png" class="image" id="watermark" alt="aimikel logo" />
    <video id="video" class="video hide">
      <source src="" type="" />
    <div class="playlist hide"></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>
      <span class="total-time">00:00:00</span>
    <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>
      <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" />

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

You Might Be Interested In:

Leave a Reply