Oyoplayer - Аудиоплеер / Улучшение / Плагины Bootstrap

Версия: v1.0

Каталог: Плагины Bootstrap

Категория: Улучшение

Для Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, WHMCS, PHP

Язык: Английский

Вес файла: 43.6 Kb

Уникальный ID: 5656

Посмотрели: 112 раз

Скачать бесплатно

Посетить Демо страница

Скачали бесплатно: 6 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/oyosoftware/oyoplayer

Информация: Пользователям

Информация: Правообладателям

Теги: Audio, Аудиоплеер, Plugin

Поделился: BootstrapТема

Добавлено: 2023-01-11 в 23:29

Метка: 1673469311

⇄ ⇅

<html>

<head>
 <title>oyoplayer Player & BootstrapTema</title>
 <script src="https://code.jquery.com/jquery-3.4.0.js"></script>
 <script src="https://bootstraptema.ru/plugins/2023/oyoplayer/oyoplayer.js"></script>
 <link rel="stylesheet" href="https://bootstraptema.ru/plugins/2023/oyoplayer/oyoplayer.css">
 <script src="https://bootstraptema.ru/plugins/2023/oyoplayer/oyobuttons.js"></script>
 <link rel="stylesheet" href="https://bootstraptema.ru/plugins/2023/oyoplayer/oyobuttons.css">
 <script src="https://bootstraptema.ru/plugins/2023/oyoplayer/oyoslider.js"></script>
 <link rel="stylesheet" href="https://bootstraptema.ru/plugins/2023/oyoplayer/oyoslider.css">
 <script src="https://bootstraptema.ru/plugins/2023/oyoplayer/oyomarquee.js"></script>
 <style>
 * {
 box-sizing: border-box;
 }
 .oyoplayer {
 display: none;
 }
 .oyoplayer2 {
 width: 500px;
 border-radius: 16px;
 box-shadow: 8px 8px 16px black;
 overflow: hidden;
 background-color: black;
 padding: 8px;
 user-select: none;
 outline: none;
 }
 .oyopanel {
 display: inline-block;
 width: 484px;
 background-color: black;
 overflow: hidden;
 border-radius: 16px;
 }
 .oyoplaycontrol {
 display: inline-block;
 vertical-align: middle;
 }
 .oyotimedisplay {
 display: inline-block;
 color: white;
 margin: 6px;
 text-align: center;
 vertical-align: middle;
 }
 .oyotrackslider {
 display: inline-block;
 vertical-align: middle;
 outline: none;
 }
 .oyovolumecontrol {
 display: inline-block;
 vertical-align: middle;
 }
 .oyovolumeslider {
 display: inline-block;
 vertical-align: middle;
 outline: none;
 }
 .oyospeaker {
 vertical-align: middle;
 margin-left: 6px;
 }
 </style>
 </head>

$(document).ready(function () {

makeAudio();
 makeNewAudio();
 $(audio).trigger("volumechange");

//audioPlayer.addToPlaylist("Piano And String Quartet.mp3", "Piano And String Quartet");
 audioPlayer.addToPlaylist("https://bootstraptema.ru/music/a/anna-asti.mp3", "!!! - AnnaAsti");
 audioPlayer.addToPlaylist("https://bootstraptema.ru/music/s/silent.mp3", "Silent");
 audioPlayer.addToPlaylist("https://bootstraptema.ru/music/t/tatyana-urskaya-kukushka.mp3", "&#1058;&#1072;&#1090;&#1100;&#1103;&#1085;&#1072;&#32;&#1070;&#1088;&#1089;&#1082;&#1072;&#1103;&#32;&#45;&#32;&#1050;&#1091;&#1082;&#1091;&#1096;&#1082;&#1072;");
 //audioPlayer.addToPlaylist("https://stream.player.arrow.nl/arrow", "Arrow Classic Rock");
 audioPlayer.setSourceIndex(1);
 audioPlayer.setNotification("Push Play to start");
 //audioPlayer.state.playall = false;
 //audioPlayer.state.samples = true;

function makeAudio() {
 audioPlayer = new oyoPlayer();
 $("body").append(audioPlayer);

audio = audioPlayer.audio;

$(audio).on("loadedmetadata", loadedMetaData);
 $(audio).on("playing", playing);
 $(audio).on("pause", paused);
 $(audio).on("ended", ended);
 $(audio).on("volumechange", volumeChange);
 $(audio).on("timeupdate", timeUpdate);

function playing() {
 if (playpause.state === 0) {
 playpause.changeState();
 }
 if ($(".oyomarqueebanner").html() !== $(".oyotag").html()) {
 tagBox.setText($(".oyotag").html());
 }
 }

function paused() {
 if (!audioPlayer.state.active) {
 if (playpause.state === 1) {
 playpause.changeState();
 }
 }
 }

function ended() {
 if (!audioPlayer.state.active) {
 if (playpause.state === 1) {
 playpause.changeState();
 }
 }
 //trackSlider.reset();
 }

function makeNewAudio() {

audioPlayer2 = document.createElement("div");
 $(audioPlayer2).addClass("oyoplayer2");
 $(audioPlayer2).attr("tabindex", 0);
 //$("body").append(audioPlayer2);

panel = document.createElement("div");
 $(panel).addClass("oyopanel");
 $(audioPlayer2).append(panel);

playControl = document.createElement("div");
 $(playControl).addClass("oyoplaycontrol");
 $(panel).append(playControl);

playpause = new oyoButton("playpause");
 playpause.scale(0.5);
 playpause.disable();
 $(playControl).append(playpause);

previous = new oyoButton("previous");
 previous.scale(0.5);
 previous.disable();
 $(playControl).append(previous);

next = new oyoButton("next");
 next.scale(0.5);
 next.disable();
 $(playControl).append(next);

timeDisplay = document.createElement("div");
 $(timeDisplay).addClass("oyotimedisplay");
 $(timeDisplay).html(formatTime(0, 0));
 $(panel).append(timeDisplay);

trackSlider = new oyoSlider();
 $(trackSlider).addClass("oyotrackslider");
 trackSlider.change(100, 34);
 trackSlider.disable();
 trackSlider.setKeyControlElement(audioPlayer2);
 $(panel).append(trackSlider);

volumeControl = document.createElement("div");
 $(volumeControl).addClass("oyovolumecontrol");
 $(panel).append(volumeControl);

volumeSlider = new oyoSlider();
 $(volumeSlider).addClass("oyovolumeslider");
 volumeSlider.change(64, 34);
 $(volumeSlider).css("display", "none");
 volumeSlider.setKeyControlElement(volumeControl);
 volumeSlider.disable();
 $(volumeControl).append(volumeSlider);

speaker = new oyoButton("speaker");
 speaker.scale(0.5);
 speaker.disable();
 $(volumeControl).append(speaker);

tagBox = new oyoMarquee(484, 15.325, 8);
 tagBox.changeBackgroundColor("black");
 tagBox.changeTextColor("white");
 $(audioPlayer2).append(tagBox);

$("body").append(audioPlayer2);
 changeTrackSlider();

$(playpause).on("click", oyoPlayPauseButtonClick);
 $(previous).on("click", oyoPreviousButtonClick);
 $(next).on("click", oyoNextButtonClick);
 $(trackSlider).on("mousedown", oyoTrackSliderMouseDown);
 $(volumeControl).on("mouseenter", oyoVolumeControlMouseEnter);
 $(volumeControl).on("mouseleave", oyoVolumeControlMouseLeave);
 $(volumeSlider).on("mousedown", oyoVolumeSliderMouseDown);
 $(speaker).on("click", oyoSpeakerButtonClick);
 $(document).on("mousemove", mouseMove);
 $(document).on("mouseup", mouseUp);
 $(audioPlayer2).on("keydown", oyoPlayerKeyDown);
 $(tagBox).on("click", tagBoxClick);

function oyoPlayPauseButtonClick() {
 if (audioPlayer.track.duration === Infinity) {
 if (playpause.state === 1) {
 audio.load();
 }
 }
 audioPlayer.playPause(audioPlayer.getCurrentTrack());
 }

function oyoPreviousButtonClick() {
 var previous = audioPlayer.skipPrevious();
 if (previous && audioPlayer.state.active) {
 playpause.changeState();
 }
 initPrevNext();
 }

function oyoNextButtonClick() {
 var next = audioPlayer.skipNext();
 if (next && audioPlayer.state.active) {
 playpause.changeState();
 }
 initPrevNext();
 }

function oyoTrackSliderMouseDown() {
 changeCurrentTime();
 }

function oyoVolumeControlMouseEnter() {
 if (!volumeSlider.disabled) {
 $(volumeSlider).css("display", "inline-block");
 changeTrackSlider();
 }
 }

function oyoVolumeControlMouseLeave() {
 if (!volumeSlider.disabled && !volumeSlider.active) {
 $(volumeSlider).css("display", "none");
 changeTrackSlider();
 }
 }

function oyoVolumeSliderMouseDown() {
 changeVolume();
 }

function oyoSpeakerButtonClick() {
 audio.muted = !audio.muted;
 }

function mouseMove() {
 if (trackSlider.active) {
 changeCurrentTime();
 }
 if (volumeSlider.active) {
 changeVolume();
 }
 }

function mouseUp(event) {
 var elements = $(volumeControl).add($(volumeControl).find("*")).toArray();
 if (elements.indexOf(event.target) === -1) {
 $(volumeSlider).css("display", "none");
 changeTrackSlider();
 }
 }

function oyoPlayerKeyDown() {
 changeCurrentTime();
 }

function tagBoxClick() {
 if (audioPlayer.state.scroll) {
 audioPlayer.state.scroll = false;
 } else {
 audioPlayer.state.scroll = true;
 }
 }

}

function changeCurrentTime() {
 if (audioPlayer.track.duration !== Infinity) {
 var currentTime = audioPlayer.track.start;
 var percentage = trackSlider.value / trackSlider.max;
 currentTime += percentage * audioPlayer.track.duration;
 audioPlayer.track.currentTime = currentTime;
 }
 }

function changeVolume() {
 var percentage = volumeSlider.value / volumeSlider.max;
 if (percentage > 0) {
 audio.muted = false;
 }
 audio.volume = percentage;
 }

});</script>

</body>
</html>

BootstrapTema

Oyoplayer - Аудиоплеер

Скриншот

Подробнее

Похожие

Архив

Всего комментариев: 0