rPlayer in action

Source: 
Playing: 
Paused: 
Muted: 
Volume: 
hls.js: 
Time:

Easy to use

NPM

Install the package via npm.

npm install @davland7/rplayer

Import the package and use it in your project.

import rPlayer from '@davland7/rplayer';

const audio = new rPlayer();

CDN

<script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.3/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@davland7/rplayer@2.2.4/dist/rplayer.umd.min.js"></script>

const audio = new rPlayer();

rPlayer is extending Audio HTMLMediaElement

Play

Play doesn't work with HLS. 🙁

const audio = new Audio('URL.m3u8');
audio.play();

audio.src = 'URL.m3u8';
audio.play();

Works with HLS. It's Magic 💪

audio.playSrc('URL.m3u8');

Important Information:

rPlayer is optimized for HLS content. While HLS is native to Apple devices, for Windows and Android, it's crucial to use the hls.js library for proper .m3u8 stream functionality. Please ensure the use of hls.js on devices other than iPhone and iPad.

In addition to .m3u8, you can also use .mp3, .aac, .ogg and others. 😮

audio.playSrc('URL.aac');

Set Volume

The volume must not be outside the range [0, 1].

audio.volume = 0.2; // 0.2 Default set in local storage

localStorage is very cool. 😎

Extras

Stop

audio.stop();

Mute

audio.mute();

Rewind

audio.rewind(10); // seconds

Volume Up

audio.upVolume();

A way not to make a mistake if the range is not good. 😉

Volume Down

10 levels up and down and blocks both ends. 😁

audio.downVolume();

Warning:

On iOS devices such as iPad and iPhone, the audio level is always controlled by the user physically. This means that the volume property is not adjustable through JavaScript on iOS devices. When you read the volume property on iOS, it will always return 1, reflecting that the user has direct control over the device's volume. Additionally, the library will always return 1 on iOS.

timeupdate event

The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.

audio.ontimeupdate = function() {
  console.log('Time:', audio.currentTime);
};

Infos

console.log('Source:', audio.url);
console.log('Playing:', audio.playing);
console.log('Paused:', audio.paused);
console.log('Muted:', audio.muted);
console.log('Volume:', audio.volume * 100);
console.log('hls.js:', audio.isHlsjs);
console.log('Time:', audio.currentTime);