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
139
README.md
139
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
|
```bash
|
||||||
|
git clone https://nnsprod.com/git/oversu/html5-css3-audio-player-with-playlist.git
|
||||||
|
cd html5-css3-audio-player-with-playlist
|
||||||
|
```
|
||||||
|
|
||||||
1. Clone the repository to your local machine:
|
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:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
git clone https://oversu.fr/git/oversu/html5-css3-audio-player-with-playlist.git
|
python3 -m http.server 8080
|
||||||
```
|
```
|
||||||
|
|
||||||
2. Open the `index.html` file in your web browser to view the audio player.
|
Then visit <http://localhost:8080>.
|
||||||
|
|
||||||
## Usage
|
## Define the playlist
|
||||||
|
|
||||||
- **Play/Pause**: Click the play/pause button to start or stop the audio.
|
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`:
|
||||||
- **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
|
```html
|
||||||
|
<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>
|
||||||
|
```
|
||||||
|
|
||||||
### JavaScript Functions
|
`data-cover` is optional. Replace the demonstration URLs in `index.html` with audio files you are allowed to distribute.
|
||||||
|
|
||||||
#### `addEventListener_multi(element, eventNames, handler)`
|
## Player options
|
||||||
Adds multiple event listeners to an element.
|
|
||||||
|
|
||||||
#### `getRandom(min, max)`
|
The player reads a JSON object from the `data-config` attribute:
|
||||||
Generates a random number within a specific range.
|
|
||||||
|
|
||||||
#### `getRelativePos(elm)`
|
```html
|
||||||
Retrieves the position of an element relative to its parent.
|
<div
|
||||||
|
id="apwp"
|
||||||
|
class="apwple-audio-player"
|
||||||
|
data-config='{"shide_top":false,"shide_btm":false,"auto_load":false}'
|
||||||
|
>
|
||||||
|
<!-- playlist -->
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
#### `formatTime(val)`
|
| Option | Effect |
|
||||||
Formats time in seconds to HH:MM:SS format.
|
|---|---|
|
||||||
|
| `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. |
|
||||||
|
|
||||||
#### `simp_initTime()`
|
The `shide_*` names are retained for compatibility with the existing script.
|
||||||
Initializes the time display and handles the end of the audio track.
|
|
||||||
|
|
||||||
#### `simp_initAudio()`
|
## Integration notes
|
||||||
Initializes the audio element and sets up event listeners.
|
|
||||||
|
|
||||||
#### `playNextTrack()`
|
- Include `style.css` and load `script.js` after the player markup.
|
||||||
Plays the next track in the playlist.
|
- 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_changeAudio(elem)`
|
## Project structure
|
||||||
Changes the audio track to the specified element.
|
|
||||||
|
|
||||||
#### `simp_loadAudio(elem)`
|
```text
|
||||||
Loads the specified audio element.
|
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
|
||||||
|
```
|
||||||
|
|
||||||
#### `simp_setAlbum(index)`
|
## Credits and license
|
||||||
Sets the album information based on the current index.
|
|
||||||
|
|
||||||
#### `simp_startScript()`
|
This project is derived from the player by [Sekedus](https://codepen.io/sekedus/pen/ExxjZEz) and maintained by [OverSu](https://oversu.fr).
|
||||||
Starts the script to initialize the player.
|
|
||||||
|
|
||||||
### HTML Structure
|
It is distributed under the GNU General Public License v3. See [LICENSE](LICENSE) for the complete terms.
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
### CSS Styling
|
|
||||||
|
|
||||||
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