cr_player is a simple music player for websites, making it easy to integrate and use music playback features on your webpage.
- Download
cr_player.jsfrom your GitHub repository. - Add the
cr_player.jsfile to your web project.
<!-- Load cr_player.js -->
<script src="path/to/cr_player.js"></script>
<script>
// Initialize cr_player
cr_player.onCreate();
// Example: Play an audio file
cr_player.play('url/to/your/audiofile.mp3');
</script>
cr_playerhas two basic methods to play a song. Additionally, if you want other customizations and upgrades that this player can provide, please take the time to read through this guide to better understand it.
This function is called to initialize the music player when the webpage loads. You should call this function right after loading cr_player.js in your HTML file.
cr_player.onCreate();This function is used to play an audio file. You need to pass in the URL of the audio file you want to play.
cr_player.play('url/to/your/audiofile.mp3');You can also pass full metadata and mark the source as a live radio stream.
cr_player.play(
'https://example.com/live-radio-stream',
'Radio Station Name',
'Country or Station',
'https://example.com/radio-cover.png',
{ is_live: true }
);When is_live: true is enabled, cr_player switches to live-stream mode:
- Shows
LIVEinstead of track duration - Hides seek controls
- Skips ended/loop behavior used for normal songs
Here is a complete example of how to use cr_player on your website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player</title>
</head>
<body>
<h1>Welcome to My Music Player</h1>
<button onclick="cr_player.play('url/to/your/audiofile.mp3')">Play Music</button>
<!-- Load cr_player.js -->
<script src="path/to/cr_player.js"></script>
<script>
// Initialize cr_player
cr_player.onCreate();
// Example: Play an audio file when the user clicks the button
document.querySelector('button').addEventListener('click', function() {
cr_player.play('url/to/your/audiofile.mp3');
});
</script>
</body>
</html>You can add songs to the currently playing playlist using one of the following methods:
This method adds a song to the playlist with just the URL to the MP3 file.
// Syntax
cr_player.add_song(url_mp3);
// Example
cr_player.add_song('https://example.com/music/song1.mp3');This method adds a song to the playlist with the URL to the MP3 file, the song name, and the artist name.
// Syntax
cr_player.add_song(url_mp3, name, artist);
// Example
cr_player.add_song('https://example.com/music/song2.mp3', 'Song Title', 'Artist Name');If you use play_emp() or add_emp() with HTML attributes, mark radio items with cr-live="1" so the player treats them as a stream.
<button
onclick="cr_player.play_emp(this)"
cr-name="Radio Station Name"
cr-url="https://example.com/live-radio-stream"
cr-artist="Station or Country"
cr-avatar="https://example.com/radio-cover.png"
cr-live="1">
Play Radio
</button><button
onclick="cr_player.add_emp(this)"
cr-name="Radio Station Name"
cr-url="https://example.com/live-radio-stream"
cr-artist="Station or Country"
cr-avatar="https://example.com/radio-cover.png"
cr-live="1">
Add Radio To Playlist
</button>Below are the methods available for controlling the playback and settings of cr_player.
Toggles between playing and pausing the current audio.
cr_player.playOrPause();Plays the next song in the playlist.
cr_player.next_song();Plays the previous song in the playlist.
cr_player.prev_song();Seeks backward by a set amount of time.
cr_player.seekbackward();Seeks forward by a set amount of time.
cr_player.seekforward();Sets the time step for seeking forward or backward.
Parameters:
timer(Number): The amount of time (in seconds) to seek forward or backward.
cr_player.set_time_step(10);Stops the current audio and resets the playback position to the beginning.
cr_player.stop();Displays the playlist.
cr_player.show_playlist();Displays the settings menu.
cr_player.show_setting();This guide provides instructions on how to enable and disable the mediaSession feature in cr_player. The mediaSession can be toggled programmatically via commands or manually through the settings interface.
You can enable or disable the mediaSession feature using the following commands:
//Enable Media Session
cr_player.mediaSession = true;
//Disable Media Session
cr_player.mediaSession = false;The set_theme method allows you to set the theme for the cr_player. The name_theme parameter can take one of the following values:
theme_basic_top: Sets the theme to have the player controls at the top.theme_basic_bottom: Sets the theme to have the player controls at the bottom.theme_dock_left: Sets the theme to dock the player on the left side.theme_dock_right: Sets the theme to dock the player on the right side.
// Set the player theme to have controls at the top
cr_player.set_theme('theme_basic_top');
// Set the player theme to have controls at the bottom
cr_player.set_theme('theme_basic_bottom');
// Set the player theme to dock on the left side
cr_player.set_theme('theme_dock_left');
// Set the player theme to dock on the right side
cr_player.set_theme('theme_dock_right');I hope this guide helps you easily install and use cr_player for your web project. If you have any questions or encounter any issues, please create an issue on GitHub or contact me via email.
- Email: [email protected]
- Email: [email protected]
Donation: Please support me with a portion of the costs to maintain the server and services for everyone
Thank you for using cr_player!