Revoir la documentation du lecteur audio
This commit is contained in:
Alex Noel
parent
48b71e324e
commit
f397c0f135
1 changed files with 70 additions and 69 deletions
135
README.md
135
README.md
|
|
@ -1,95 +1,96 @@
|
||||||
|
# HTML5 audio player with playlist
|
||||||
# Simple Audio Player with Playlist
|
|
||||||
|
|
||||||
This project is a simple audio player with a playlist, built using HTML, CSS, and JavaScript with NO LIBS (No jQuery or whatever). It supports basic audio controls, displays the current and total duration of the audio, and allows for autoplay of the next track in the playlist.
|
A compact audio player built with HTML, CSS and vanilla JavaScript. It creates its controls from a simple playlist in the page and does not require a JavaScript framework.
|
||||||
|
|
||||||
|
[Open the live demo](https://streaming.nnsprod.com/?MP3=Naheulbeuk)
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- Play, pause, and navigate through the audio tracks
|
- play, pause, previous and next controls;
|
||||||
- Display album cover, title, and artist information
|
- seek bar with elapsed and total time;
|
||||||
- Volume control with mute/unmute functionality
|
- volume control and mute button;
|
||||||
- Progress bar for tracking the audio playback
|
- track title, artist and optional cover artwork;
|
||||||
- Autoplay the next track when the current track ends
|
- automatic playback of the next track;
|
||||||
- Shuffle and repeat functionality
|
- sequential and random playback modes;
|
||||||
- Show/hide album and playlist
|
- collapsible album and playlist sections;
|
||||||
|
- responsive layout.
|
||||||
|
|
||||||
## Demo
|
## Quick start
|
||||||
|
|
||||||
You can see a live demo of the audio player [here](https://streaming.nnsprod.com/?MP3=Naheulbeuk).
|
Clone the repository and open `index.html` in a browser:
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
1. Clone the repository to your local machine:
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
git clone https://oversu.fr/git/oversu/html5-css3-audio-player-with-playlist.git
|
git clone https://nnsprod.com/git/oversu/html5-css3-audio-player-with-playlist.git
|
||||||
|
cd html5-css3-audio-player-with-playlist
|
||||||
```
|
```
|
||||||
|
|
||||||
2. Open the `index.html` file in your web browser to view the audio player.
|
No build step is required. For reliable audio loading, serving the directory through a small local HTTP server is preferable to opening it with a `file://` URL:
|
||||||
|
|
||||||
## Usage
|
```bash
|
||||||
|
python3 -m http.server 8080
|
||||||
|
```
|
||||||
|
|
||||||
- **Play/Pause**: Click the play/pause button to start or stop the audio.
|
Then visit <http://localhost:8080>.
|
||||||
- **Previous/Next**: Use the previous and next buttons to navigate through the playlist.
|
|
||||||
- **Volume Control**: Adjust the volume slider to control the audio volume. Click the mute button to mute/unmute the audio.
|
|
||||||
- **Progress Bar**: Drag the progress bar to seek through the audio track.
|
|
||||||
- **Shuffle**: Click the shuffle button to toggle shuffle mode.
|
|
||||||
- **Repeat**: Click the repeat button to toggle repeat mode.
|
|
||||||
- **Show/Hide Album/Playlist**: Use the buttons to show or hide the album and playlist sections.
|
|
||||||
|
|
||||||
## Code Explanation
|
## Define the playlist
|
||||||
|
|
||||||
### JavaScript Functions
|
Each track is represented by an item in `.apwp-playlist`. The audio URL is stored in `data-src`; the title and artist use `.apwp-source` and `.apwp-desc`:
|
||||||
|
|
||||||
#### `addEventListener_multi(element, eventNames, handler)`
|
```html
|
||||||
Adds multiple event listeners to an element.
|
<li>
|
||||||
|
<span
|
||||||
|
class="apwp-source"
|
||||||
|
data-src="https://example.org/audio/my-track.mp3"
|
||||||
|
data-cover="https://example.org/images/my-cover.webp"
|
||||||
|
>
|
||||||
|
My track
|
||||||
|
</span>
|
||||||
|
<span class="apwp-desc">Artist name</span>
|
||||||
|
</li>
|
||||||
|
```
|
||||||
|
|
||||||
#### `getRandom(min, max)`
|
`data-cover` is optional. Replace the demonstration URLs in `index.html` with audio files you are allowed to distribute.
|
||||||
Generates a random number within a specific range.
|
|
||||||
|
|
||||||
#### `getRelativePos(elm)`
|
## Player options
|
||||||
Retrieves the position of an element relative to its parent.
|
|
||||||
|
|
||||||
#### `formatTime(val)`
|
The player reads a JSON object from the `data-config` attribute:
|
||||||
Formats time in seconds to HH:MM:SS format.
|
|
||||||
|
|
||||||
#### `simp_initTime()`
|
```html
|
||||||
Initializes the time display and handles the end of the audio track.
|
<div
|
||||||
|
id="apwp"
|
||||||
|
class="apwple-audio-player"
|
||||||
|
data-config='{"shide_top":false,"shide_btm":false,"auto_load":false}'
|
||||||
|
>
|
||||||
|
<!-- playlist -->
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
#### `simp_initAudio()`
|
| Option | Effect |
|
||||||
Initializes the audio element and sets up event listeners.
|
|---|---|
|
||||||
|
| `auto_load` | Loads the first track as soon as the player starts. |
|
||||||
|
| `shide_top` | Starts with the album information collapsed. |
|
||||||
|
| `shide_btm` | Starts with the playlist collapsed. |
|
||||||
|
|
||||||
#### `playNextTrack()`
|
The `shide_*` names are retained for compatibility with the existing script.
|
||||||
Plays the next track in the playlist.
|
|
||||||
|
|
||||||
#### `simp_changeAudio(elem)`
|
## Integration notes
|
||||||
Changes the audio track to the specified element.
|
|
||||||
|
|
||||||
#### `simp_loadAudio(elem)`
|
- Include `style.css` and load `script.js` after the player markup.
|
||||||
Loads the specified audio element.
|
- The supplied stylesheet imports Font Awesome 4.7 from a CDN for the control icons.
|
||||||
|
- Remote audio servers must permit playback from your site. Browsers can block cross-origin resources or insecure `http://` tracks on an HTTPS page.
|
||||||
|
- The current script initializes the player whose identifier is `apwp`.
|
||||||
|
|
||||||
#### `simp_setAlbum(index)`
|
## Project structure
|
||||||
Sets the album information based on the current index.
|
|
||||||
|
|
||||||
#### `simp_startScript()`
|
```text
|
||||||
Starts the script to initialize the player.
|
index.html Demonstration playlist and player container
|
||||||
|
style.css Player layout, controls and responsive styles
|
||||||
|
script.js Playback, playlist and volume behaviour
|
||||||
|
LICENSE GNU General Public License v3
|
||||||
|
```
|
||||||
|
|
||||||
### HTML Structure
|
## Credits and license
|
||||||
|
|
||||||
The HTML structure includes an audio element and various controls for playback, volume, and track navigation. The playlist is displayed as a list of items.
|
This project is derived from the player by [Sekedus](https://codepen.io/sekedus/pen/ExxjZEz) and maintained by [OverSu](https://oversu.fr).
|
||||||
|
|
||||||
### CSS Styling
|
It is distributed under the GNU General Public License v3. See [LICENSE](LICENSE) for the complete terms.
|
||||||
|
|
||||||
The CSS provides the styling for the audio player, including the layout of the controls, the appearance of the album and playlist, and the responsive design for different screen sizes.
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.
|
|
||||||
|
|
||||||
## Contributing
|
|
||||||
|
|
||||||
If you have suggestions for improving this project, feel free to submit a pull request or open an issue. Contributions are welcome!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Note:** This project is based on the code provided in the CodePen demo by [sekedus](https://codepen.io/sekedus/pen/ExxjZEz).
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue