Форум Pawn-Wiki.Ru - Воплоти мечту в реальность!: [CEF] Эквалайзер - Форум Pawn-Wiki.Ru - Воплоти мечту в реальность!

Перейти к содержимому

Страница 1 из 1
  • Вы не можете создать новую тему
  • Вы не можете ответить в тему

[ Scr ][ Other ]
[CEF] Эквалайзер Пример реализации эквалайзера на CEF
Оценка: -----

#1
Пользователь офлайн   NiceXPlayer 

  • Новичок
  • Вставить ник
  • Раскрыть информацию
Выкладываю пример реализации эквалайзера на cef. В процессе я понял, что автопроигрывание вообще не работает в хроме. Ради теста запустил на сервере и...оно работает

Для начала я расскажу как брать прямые ссылки на радио и потоки без прочих кодов. Для того чтобы брать прямую ссылку на поток в радио или любом другом файле установите расширения для браузера под названием FMPLAY URL Getter. Чтобы появилась ссылка на поток, вам нужно просто начать проигрывание музыки на данном сайте.

Кто думает, что реклама я вам сочувствую. Остальные читают дальше :)

Если возникнут проблемы или вопросы. Пишите в VK: @krasavabrox


Обзор системы



Нам нужна основа для html файла


<!DOCTYPE HTML PUBLIC>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Пример веб-страницы</title>
 </head>
 <body>
 </body>
</html>


В <head> добавляем <style></style> и вписываем код. Получается.

<!DOCTYPE HTML PUBLIC>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Пример веб-страницы</title>
<style>
	
#myCanvas {
  animation: color-me-in 5s infinite;
}

@keyframes color-me-in {
  50% {
    background: #64e4ed;
  }
  50% {
    background: #025721;
  }
  50% {
    background: #01232e;
  }
  50% {
    background: #64e4ed;
  }
}

div audio {
  display: block;
  margin-bottom:10px;
  margin-left:10px;
}

#myCanvas {
width: 20%;
height: 6% !important;
  border:1px solid;
  margin-left:auto;
  margin-right:auto;
  border-radius:33px;
  position: fixed; /* Фиксированное положение */
    left: 0; bottom: 0; /* Левый нижний угол */
	padding: 12px; /* Поля вокруг текста */
	background: #39b54a; /* Цвет фона */
    color: #fff; /* Цвет текста */
    width: 20%; /* Ширина слоя */
position: absolute;
top: 950px; left: 760px;
  
}


div.controls:hover {
  color:blue;
  font-weight:bold;
}
   
div.controls label {
  display: inline-block;
  text-align: center;
  width: 10%;
}

div.controls label, div.controls input, output {
    vertical-align: middle;
    padding: 0;
    margin: 0;
   font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
  font-size: 12px;
}

audio{
position: absolute;
top: 890px; left: 410px;
width: 1%; /* Ширина слоя */
}
</style>
 </head>
 <body>
 </body>
</html>


В <body> добавляем прямую ссылку на наш аудиофайл/радио. И сам js скрипт. С тегом <script>


<body>
      <audio src="ВАША ПРЯМАЯ ССЫЛКА" id="player" loop autoplay crossorigin="anonymous" type="audio/mp3"></audio>
<div class="main">
  <canvas id="myCanvas" width=1200 height=250></canvas>
</div>

<script>
//построить эквалайзер с несколькими фильтрами
var audioCtx = window.AudioContext || window.webkitAudioContext;

var canvas;
var audioContext, canvasContext;
var analyser;
var width, height;

var dataArray, bufferLength;

window.onload = function() {
  audioContext= new audioCtx();
  
  canvas = document.querySelector("#myCanvas");
  width = canvas.width;
  height = canvas.height;
  canvasContext = canvas.getContext('2d');
  
  buildAudioGraph();
  
  requestAnimationFrame(visualize);
};

function buildAudioGraph() {
  var mediaElement = document.getElementById('player');
      mediaElement.onplay = (e) => {audioContext.resume();}

  // исправлено для политики автозапуска
  mediaElement.addEventListener('play',() => audioContext.resume());

  var sourceNode =   audioContext.createMediaElementSource(mediaElement);
  
  // Создать узел анализатора
  analyser = audioContext.createAnalyser();
  
  // Попробуйте изменить на более низкие значения: 512, 256, 128, 64 ...
  analyser.fftSize = 512;
  bufferLength = analyser.frequencyBinCount;
  dataArray = new Uint8Array(bufferLength);
  
  sourceNode.connect(analyser);
  analyser.connect(audioContext.destination);
}

function visualize() {
  // очистить canvas
  canvasContext.clearRect(0, 0, width, height);
  
  // Или используйте заливку RGBA, чтобы получить небольшой эффект размытия
  //canvasContext.fillStyle = 'rgba (0, 0, 0, 0.5)';
  //canvasContext.fillRect(0, 0, width, height);
  
  // Получить данные анализатора
  analyser.getByteFrequencyData(dataArray);

   var barWidth = width / bufferLength;
      var barHeight;
      var x = 0;
   
      // значения изменяются от 0 до 256, а высота холста равна 100. Давайте изменим масштаб
      // перед отрисовкой. Это масштабный коэффициент
      heightScale = height/128;
  
      for(var i = 0; i < bufferLength; i++) {
        barHeight = dataArray[i];


        canvasContext.fillStyle = 'rgb(' + (barHeight+0) + ',4,160)';
        barHeight *= heightScale;
        canvasContext.fillRect(x, height-barHeight/2, barWidth, barHeight/2);

        // 2 - количество пикселей между столбцами
        x += barWidth + 2;
      }
  
  // вызовите снова функцию визуализации со скоростью 60 кадров / с
  requestAnimationFrame(visualize);
  
}

</script>
</body>





Если у вас не получилось. Я снизу скину готовый код


<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
	
#myCanvas {
  animation: color-me-in 5s infinite;
}

@keyframes color-me-in {
  50% {
    background: #64e4ed;
  }
  50% {
    background: #025721;
  }
  50% {
    background: #01232e;
  }
  50% {
    background: #64e4ed;
  }
}

div audio {
  display: block;
  margin-bottom:10px;
  margin-left:10px;
}

#myCanvas {
width: 20%;
height: 6% !important;
  border:1px solid;
  margin-left:auto;
  margin-right:auto;
  border-radius:33px;
  position: fixed; /* Фиксированное положение */
    left: 0; bottom: 0; /* Левый нижний угол */
	padding: 12px; /* Поля вокруг текста */
	background: #39b54a; /* Цвет фона */
    color: #fff; /* Цвет текста */
    width: 20%; /* Ширина слоя */
position: absolute;
top: 950px; left: 760px;
  
}


div.controls:hover {
  color:blue;
  font-weight:bold;
}
   
div.controls label {
  display: inline-block;
  text-align: center;
  width: 10%;
}

div.controls label, div.controls input, output {
    vertical-align: middle;
    padding: 0;
    margin: 0;
   font-family: "Open Sans",Verdana,Geneva,sans-serif,sans-serif;
  font-size: 12px;
}

audio{
position: absolute;
top: 890px; left: 410px;
width: 1%; /* Ширина слоя */
}
</style>
</head>
<body>
      <audio src="ВАША ПРЯМАЯ ССЫЛКА" id="player" loop autoplay crossorigin="anonymous" type="audio/mp3"></audio>
<div class="main">
  <canvas id="myCanvas" width=1200 height=250></canvas>
</div>

<script>
//построить эквалайзер с несколькими фильтрами
var audioCtx = window.AudioContext || window.webkitAudioContext;

var canvas;
var audioContext, canvasContext;
var analyser;
var width, height;

var dataArray, bufferLength;

window.onload = function() {
  audioContext= new audioCtx();
  
  canvas = document.querySelector("#myCanvas");
  width = canvas.width;
  height = canvas.height;
  canvasContext = canvas.getContext('2d');
  
  buildAudioGraph();
  
  requestAnimationFrame(visualize);
};

function buildAudioGraph() {
  var mediaElement = document.getElementById('player');
      mediaElement.onplay = (e) => {audioContext.resume();}

  // исправлено для политики автозапуска
  mediaElement.addEventListener('play',() => audioContext.resume());

  var sourceNode =   audioContext.createMediaElementSource(mediaElement);
  
  // Создать узел анализатора
  analyser = audioContext.createAnalyser();
  
  // Попробуйте изменить на более низкие значения: 512, 256, 128, 64 ...
  analyser.fftSize = 512;
  bufferLength = analyser.frequencyBinCount;
  dataArray = new Uint8Array(bufferLength);
  
  sourceNode.connect(analyser);
  analyser.connect(audioContext.destination);
}

function visualize() {
  // очистить canvas
  canvasContext.clearRect(0, 0, width, height);
  
  // Или используйте заливку RGBA, чтобы получить небольшой эффект размытия
  //canvasContext.fillStyle = 'rgba (0, 0, 0, 0.5)';
  //canvasContext.fillRect(0, 0, width, height);
  
  // Получить данные анализатора
  analyser.getByteFrequencyData(dataArray);

   var barWidth = width / bufferLength;
      var barHeight;
      var x = 0;
   
      // значения изменяются от 0 до 256, а высота холста равна 100. Давайте изменим масштаб
      // перед отрисовкой. Это масштабный коэффициент
      heightScale = height/128;
  
      for(var i = 0; i < bufferLength; i++) {
        barHeight = dataArray[i];


        canvasContext.fillStyle = 'rgb(' + (barHeight+0) + ',4,160)';
        barHeight *= heightScale;
        canvasContext.fillRect(x, height-barHeight/2, barWidth, barHeight/2);

        // 2 - количество пикселей между столбцами
        x += barWidth + 2;
      }
  requestAnimationFrame(visualize);
  
}

</script>
</body>
</html>



Скачать плагины и клиент версии 1.4 ТЫК

Сообщение отредактировал NiceXPlayer: 13 октября 2021 - 19:28

3

#2
Пользователь офлайн   bleg0 

  • Прохожий
  • Вставить ник
  • Раскрыть информацию
умно))
красиво, уже чекнул
0

#3
Пользователь офлайн   Pawn_Coder 

  • Прохожий
  • Вставить ник
  • Раскрыть информацию
Можно скриншот?
0

#4
Пользователь офлайн   NiceXPlayer 

  • Новичок
  • Вставить ник
  • Раскрыть информацию

Просмотр сообщенияPawn_Coder (13 октября 2021 - 15:53) писал:

Можно скриншот?


Извиняюсь за задержку. Много дел. Все будет. Я сейчас видео сделаю.

UPD: Видео загружено

Сообщение отредактировал NiceXPlayer: 13 октября 2021 - 19:41

1

Поделиться темой:


Страница 1 из 1
  • Вы не можете создать новую тему
  • Вы не можете ответить в тему

1 человек читают эту тему
0 пользователей, 1 гостей, 0 скрытых пользователей


Яндекс.Метрика