Revoir la documentation du lecteur audio
This commit is contained in:
parent
48b71e324e
commit
dee70f65c7
1 changed files with 71 additions and 68 deletions
137
README.md
137
README.md
|
|
@ -1,95 +1,98 @@
|
|||
|
||||
# Simple Audio Player with Playlist
|
||||
# HTML5 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.
|
||||
|
||||
[](https://nnsprod.com/cloud/s/CTkFAKnxXPxoHrj)
|
||||
|
||||
[Open the live demo](https://streaming.nnsprod.com/?MP3=Naheulbeuk)
|
||||
|
||||
## Features
|
||||
|
||||
- Play, pause, and navigate through the audio tracks
|
||||
- Display album cover, title, and artist information
|
||||
- Volume control with mute/unmute functionality
|
||||
- Progress bar for tracking the audio playback
|
||||
- Autoplay the next track when the current track ends
|
||||
- Shuffle and repeat functionality
|
||||
- Show/hide album and playlist
|
||||
- play, pause, previous and next controls;
|
||||
- seek bar with elapsed and total time;
|
||||
- volume control and mute button;
|
||||
- track title, artist and optional cover artwork;
|
||||
- automatic playback of the next track;
|
||||
- sequential and random playback modes;
|
||||
- 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).
|
||||
|
||||
## Installation
|
||||
|
||||
1. Clone the repository to your local machine:
|
||||
Clone the repository and open `index.html` in a browser:
|
||||
|
||||
```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.
|
||||
- **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.
|
||||
Then visit <http://localhost:8080>.
|
||||
|
||||
## 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)`
|
||||
Adds multiple event listeners to an element.
|
||||
```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>
|
||||
```
|
||||
|
||||
#### `getRandom(min, max)`
|
||||
Generates a random number within a specific range.
|
||||
`data-cover` is optional. Replace the demonstration URLs in `index.html` with audio files you are allowed to distribute.
|
||||
|
||||
#### `getRelativePos(elm)`
|
||||
Retrieves the position of an element relative to its parent.
|
||||
## Player options
|
||||
|
||||
#### `formatTime(val)`
|
||||
Formats time in seconds to HH:MM:SS format.
|
||||
The player reads a JSON object from the `data-config` attribute:
|
||||
|
||||
#### `simp_initTime()`
|
||||
Initializes the time display and handles the end of the audio track.
|
||||
```html
|
||||
<div
|
||||
id="apwp"
|
||||
class="apwple-audio-player"
|
||||
data-config='{"shide_top":false,"shide_btm":false,"auto_load":false}'
|
||||
>
|
||||
<!-- playlist -->
|
||||
</div>
|
||||
```
|
||||
|
||||
#### `simp_initAudio()`
|
||||
Initializes the audio element and sets up event listeners.
|
||||
| Option | Effect |
|
||||
|---|---|
|
||||
| `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()`
|
||||
Plays the next track in the playlist.
|
||||
The `shide_*` names are retained for compatibility with the existing script.
|
||||
|
||||
#### `simp_changeAudio(elem)`
|
||||
Changes the audio track to the specified element.
|
||||
## Integration notes
|
||||
|
||||
#### `simp_loadAudio(elem)`
|
||||
Loads the specified audio element.
|
||||
- Include `style.css` and load `script.js` after the player markup.
|
||||
- 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)`
|
||||
Sets the album information based on the current index.
|
||||
## Project structure
|
||||
|
||||
#### `simp_startScript()`
|
||||
Starts the script to initialize the player.
|
||||
```text
|
||||
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
|
||||
|
||||
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).
|
||||
It is distributed under the GNU General Public License v3. See [LICENSE](LICENSE) for the complete terms.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue