Scribd Logo
Upload

Welcome to Scribd!

  • 29 views

    Mini Project

    Uploaded by

    nrathaur844
    This document summarizes a mini-project to build a web-based music player. It will have a clean user interface to play music files in the browser. The HTML will define the layout with sections for track details, playback buttons, and sliders to control playback and volume. CSS styling will make the player visually appealing, rounding corners and modifying slider appearances. JavaScript will handle loading new tracks, resetting values, updating the track art, and syncing a seek slider to the current playback position.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd

    Mini Project

    Uploaded by

    nrathaur844
    29 views10 pages
    This document summarizes a mini-project to build a web-based music player. It will have a clean user interface to play music files in the browser. The HTML will define the layout with sections for track details, playback buttons, and sliders to control playback and volume. CSS styling will make the player visually appealing, rounding corners and modifying slider appearances. JavaScript will handle loading new tracks, resetting values, updating the track art, and syncing a seek slider to the current playback position.

    Original Title

    Mini-Project (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document summarizes a mini-project to build a web-based music player. It will have a clean user interface to play music files in the browser. The HTML will define the layout with sections for track details, playback buttons, and sliders to control playback and volume. CSS styling will make the player visually appealing, rounding corners and modifying slider appearances. JavaScript will handle loading new tracks, resetting values, updating the track art, and syncing a seek slider to the current playback position.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    29 views10 pages

    Mini Project

    Uploaded by

    nrathaur844
    This document summarizes a mini-project to build a web-based music player. It will have a clean user interface to play music files in the browser. The HTML will define the layout with sections for track details, playback buttons, and sliders to control playback and volume. CSS styling will make the player visually appealing, rounding corners and modifying slider appearances. JavaScript will handle loading new tracks, resetting values, updating the track art, and syncing a seek slider to the current playback position.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    You are on page 1of 10

    Mini-Project:

    To:
    Ms.Parul By:Priyanshu Kumar
    University Roll No:2002300100122
    College Roll No:15094
    Abstract:-
     As streaming is increasingly being adopted by users,
    online media players have become essential for
    consuming media on the internet. Music players allow one
    to enjoy music in any browser and supports a lot of the
    features of an offline music player.

     We will be creating a music player with a clean user


    interface that can be used to play music in the browser.
    We will also implement features like seeking and volume
    control. HTML has several methods in the
    HTMLMediaElement interface that can be used to play
    audio files and control its playback without using any
    other library.
    The HTML Layout
    The HTML layout defines the element structure that would be shown
    on the page. The player can be divided into the following portions:

     Details Portion: This section shows the details of the current track
    being played. It includes the track number, track album, track name
    and track artist.

     Buttons Portion: This section shows the buttons that are used to
    control the playback of the track. It includes the play/pause button,
    the previous and next track buttons. They would have an onclick()
    method that calls a specific function defined in the JavaScript file.

     Sliders Portion: This section contains the seek slider and volume
    slider that can be used to control the playback and volume.
    The CSS Styling
     Using CSS we can style the different portions to make it more
    visually appealing:

     The track art image is given a fixed dimension and made


    rounded using the border-radius property.

     The two sliders have been modified from their default look by
    using the appearance property. The height and background are
    changed to suit the color scheme. They are also given slight
    transparency that smoothly transitions to the full opacity using
    the transition property.

     All the playback controls have their cursor property set so that it
    changes to a pointer whenever the mouse hovers over it.
    JavaScript
     Loading a new track from the tracklist

     Reset all the values of the previous track


    A resetValues() function is created which handles the resetting of the
    duration value and the slider to their initial values before a new track
    starts.

     Updating the track art to be shown


    The track art is fetched from the array and assigned with the help of the
    backgroundImage property.

     The seek slider


    The seek slider shows the current playback position on a slider by
    updating it with the current time of the track. A new function is created
    seekUpdate() which handles the updating of the seek slider relative to the
    current time of the track. The seek slider position is calculated and set
    using the value property.
    THANK YOU

    You might also like

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy