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 @@
|
|||
|
||||
# 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.
|
||||
|
||||
[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).
|
||||
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
|
||||
git clone https://oversu.fr/git/oversu/html5-css3-audio-player-with-playlist.git
|
||||
```
|
||||
```bash
|
||||
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.
|
||||
- **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.
|
||||
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`:
|
||||
|
||||
## 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)`
|
||||
Adds multiple event listeners to an element.
|
||||
## Player options
|
||||
|
||||
#### `getRandom(min, max)`
|
||||
Generates a random number within a specific range.
|
||||
The player reads a JSON object from the `data-config` attribute:
|
||||
|
||||
#### `getRelativePos(elm)`
|
||||
Retrieves the position of an element relative to its parent.
|
||||
```html
|
||||
<div
|
||||
id="apwp"
|
||||
class="apwple-audio-player"
|
||||
data-config='{"shide_top":false,"shide_btm":false,"auto_load":false}'
|
||||
>
|
||||
<!-- playlist -->
|
||||
</div>
|
||||
```
|
||||
|
||||
#### `formatTime(val)`
|
||||
Formats time in seconds to HH:MM:SS format.
|
||||
| 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. |
|
||||
|
||||
#### `simp_initTime()`
|
||||
Initializes the time display and handles the end of the audio track.
|
||||
The `shide_*` names are retained for compatibility with the existing script.
|
||||
|
||||
#### `simp_initAudio()`
|
||||
Initializes the audio element and sets up event listeners.
|
||||
## Integration notes
|
||||
|
||||
#### `playNextTrack()`
|
||||
Plays the next track in the playlist.
|
||||
- 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_changeAudio(elem)`
|
||||
Changes the audio track to the specified element.
|
||||
## Project structure
|
||||
|
||||
#### `simp_loadAudio(elem)`
|
||||
Loads the specified audio element.
|
||||
```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
|
||||
```
|
||||
|
||||
#### `simp_setAlbum(index)`
|
||||
Sets the album information based on the current index.
|
||||
## Credits and license
|
||||
|
||||
#### `simp_startScript()`
|
||||
Starts the script to initialize the player.
|
||||
This project is derived from the player by [Sekedus](https://codepen.io/sekedus/pen/ExxjZEz) and maintained by [OverSu](https://oversu.fr).
|
||||
|
||||
### HTML Structure
|
||||
|
||||
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).
|
||||
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