The oyoplayer goals to give you a simple strategy to create your personal customized audio participant whereas make it absolutely appropriate on any gadget by utilizing HTML5 Audio API.
This text will present you the way to create your personal customized audio participant with playlist assist with jQuery. You may find out about a number of the advantages of doing so and see a demo.
How one can use it:
1. Load jQuery library along with the oyoplayer plugin’s information within the HTML.
<!-- jQuery --> <script src="/path/to/cdn/jquery.slim.min.js"></script> <!-- oyoplayer plugin --> <hyperlink rel="stylesheet" href="oyoplayer.css" /> <script src="oyoplayer.js"></script>
2. Create a brand new audio participant occasion.
audioPlayer = new oyoPlayer();
3. Append the audio participant to any component inside the doc.
$(".container").append(audioPlayer);
4. Add your audio information to the playlist.
audioPlayer.addToPlaylist("1.mp3", "Audio 1");
audioPlayer.addToPlaylist("2.mp3", "Audio 2");
audioPlayer.addToPlaylist("3.mp3", "Audio 3");
// ...
5. Set which audio to play on begin.
// Audio 1 audioPlayer.setSourceIndex(1);
6. Set the textual content to show within the audio participant when in standby.
audioPlayer.setNotification("Push Play to begin");
7. Skip to the following audio.
audioPlayer.skipNext();
8. Customise the looks of the audio participant.
.oyoplayer {
box-sizing : border-box;
width : 500px;
min-width : 272px;
max-width : 500px;
border-radius : 8px;
box-shadow : 8px 8px 16px black;
background-color : black;
padding : 0px 8px 8px;
margin-bottom : 8px;
font-family : 'Inter', 'Roboto', Arial, Verdana, Helvetica, sans-serif;
font-size : 10pt;
user-select : none;
overflow : hidden;
}
9. Properties.
// get the present audio audioPlayer.getCurrentTrack(); // get all audio information audioPlayer.getSongs() // examine states audioPlayer.state.lively audioPlayer.state.enjoying audioPlayer.state.paused
Changelog:
2025-04-13
This superior jQuery plugin is developed by oyosoftware. For extra Superior Usages, please examine the demo web page or go to the official web site.
