The opposite of lossy compression is lossless compression, where data is compressed using algorithms that can perfectly reconstruct the original data using the compressed data. The more the file is compressed, the lesser the sound quality. However, because lossy compression reconstructs only an approximation of the original data, the sound quality of the file may degrade. So, lossy compression aims to delete the frequencies that the people can’t hear anyway. The human ear is not capable of hearing all audio frequencies, they can generally only hear sound from 20Hz to 20kHz. In lossy compression, the partial deletion of data is based on psychoacoustics. It uses lossy compression to discard some parts of the data, resulting in a significant reduction in file size. MP3 files are basically compressed audio files. DID YOU KNOW?ĭid you know that MP3 stands for MPEG-1 (or MPEG-2) Audio Layer III? MPEG stands for Moving Picture Experts Group, the team that designed the MP3 format in 1993. The Green Audio Player JavaScript library lets you create minimal clean accessible HTML5 audio players with custom controls in the web app. The ID3 can be found within the MP3 file itself and takes up 128 bytes of space. “ID3” stands for “IDentify an MP3,” and it was developed in 1996 by Eric Kemp. This data is encoded in a “container” called ID3, which stores the information in a standard format. It will also create two variables soundIcon and muteIcon to be used to change the icon of the button based on whether the audio is muted or not.MP3 tags are metadata about the MP3 file that conveys information about the artist, track number, album, album cover, year, and genre. This will add a soundButton variable, which will be the sound button element. Inside that container, we'll add the track "image" element.Ĭonst soundButton = document. We'll start by adding in the HTML the container. We'll just an icon from Heroicons to simulate that. It gives a nice style to the audio player. Usually, audio players have an image of the track playing. You can see the full demo on CodePen at the end of the section. Then with the help of Javascript bind the audio element's functionalities to these elements.Īll the icons used in this section are from Heroicons. We'll a nice looking player that uses different elements to achieve a good style. In this section, we'll create our own custom audio player. In the example below, we add a background color, a border radius, and some padding. To style the volume slider, which on Chrome appears after hovering the mute button, you can use the selector audio::-webkit-media-controls-volume-slider. In the example below, we add a background color and a border radius. To style the timeline you can use the selector audio::-webkit-media-controls-timeline. In the example below, we change the color of the text. To style the remaining time you can use the selector audio::-webkit-media-controls-time-remaining-display. To style the current time you can use the selector audio::-webkit-media-controls-current-time-display. In the example below, we change the background color of the play button as well as add a border-radius. To style the play button, you can use the selector audio::-webkit-media-controls-play-button. In the example below, we change the background color of the mute button as well as add a border-radius. To style the mute button, you can use the selector audio::-webkit-media-controls-mute-button. In the example below, we use the selector to change the background color. To style the control panel, which is the container of all the audio's controls, you can use the selector audio::-webkit-media-controls-panel. So, if you want to see how the audio element's style changes, please use Chrome. We'll see a few examples of how we can use some of these selectors to style the audio element.Īll the examples below will only work on Chrome. However, these only work on select browsers like Chrome. Using these selectors, you can give basic styling to audio elements. Audio : :-webkit-media-controls-mute-buttonĪudio : :-webkit-media-controls-play-buttonĪudio : :-webkit-media-controls-timeline-containerĪudio : :-webkit-media-controls-current-time-displayĪudio : :-webkit-media-controls-time-remaining-displayĪudio : :-webkit-media-controls-volume-slider-containerĪudio : :-webkit-media-controls-volume-sliderĪudio : :-webkit-media-controls-seek-back-buttonĪudio : :-webkit-media-controls-seek-forward-buttonĪudio : :-webkit-media-controls-fullscreen-buttonĪudio : :-webkit-media-controls-rewind-buttonĪudio : :-webkit-media-controls-return-to-realtime-buttonĪudio : :-webkit-media-controls-toggle-closed-captions-button
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |