oyoplayer旨在通过使用HTML5 audio API，为您提供创建自定义音频播放器的简单方法，同时使其在任何设备上完全兼容。

本文将向您展示如何使用jQuery创建具有播放列表支持的自定义音频播放器。您将了解这样做的一些好处，并观看演示。

如何使用它:

1.将jQuery库与oyoplayer插件的文件一起加载到HTML中。

<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- oyoplayer plugin -->
<link rel="stylesheet" href="oyoplayer.css" />
<script src="oyoplayer.js"></script>

2.创建一个新的音频播放器实例。

audioPlayer = new oyoPlayer();

3.将音频播放器附加到文档中的任何元素。

$(".container").append(audioPlayer);

4.将您的音频文件添加到播放列表中。

audioPlayer.addToPlaylist("1.mp3", "Audio 1");
audioPlayer.addToPlaylist("2.mp3", "Audio 2");
audioPlayer.addToPlaylist("3.mp3", "Audio 3");
// ...

5.设置启动时播放的音频。

// Audio 1
audioPlayer.setSourceIndex(1);

6.将文本设置为在待机状态下显示在音频播放器中。

audioPlayer.setNotification("Push Play to start");

7.跳到下一个音频。

audioPlayer.skipNext();

8.自定义音频播放器的外观。

.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.财产。

// get the current audio
audioPlayer.getCurrentTrack();
 
// get all audio files
audioPlayer.getSongs()
 
// check states
audioPlayer.state.active
audioPlayer.state.playing
audioPlayer.state.paused

更新日志：

2022-02-26

• JS更新

预览截图

外观现代 自定义音频播放器 jQuery oyoplayer