Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.76/21: Рейтинг темы: голосов - 21, средняя оценка - 4.76
1 / 1 / 0
Регистрация: 07.03.2018
Сообщений: 31

Визуализатор

05.10.2019, 21:02. Показов 4323. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени суток.
Смотрю пример визуализации звука - JS Audio Visualizer
И пытаюсь сделать, чтобы визуализация работала для онлайн-радио.
Но, если в html файле ставлю
HTML5
1
<audio id="audio" src="http://online2.radiorelax.ua/RadioRelax_Instrumental" controls></audio>
а в js файле комментирую две строки
JavaScript
1
2
    //var files = this.files;
    //audio.src = URL.createObjectURL(files[0]);
То, по идеи, выбрав любой файл, должно начаться воспроизведение звука и запуск визуализации. Но, этого не происходит.
Получаю такое сообщение:
HTMLMediaElement, переданный в createMediaElementSource, имеет ресурс из постороннего источника, узел будет выводить тишину
И я не могу понять как это исправить.

Добавлено через 48 минут
Даже более банально, на чистом листе:
HTML5
1
<audio id="my-audio" src="http://online2.radiorelax.ua/RadioRelax_Instrumental"></audio>
JavaScript
1
2
3
4
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var audioElement = document.getElementById('my-audio');
var audioSrc = audioCtx.createMediaElementSource(audioElement);
var analyser = audioCtx.createAnalyser();
получаю ту же ошибку:
HTMLMediaElement, переданный в createMediaElementSource, имеет ресурс из постороннего источника, узел будет выводить тишину.
Вообще не пойму, что не так
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
05.10.2019, 21:02
Ответы с готовыми решениями:

Визуализатор бухгалтерских проводок
День добрый! Недавно устроился в новый отдел и по работе часто имею дело с бухгалтерскими проводками организаций. Иногда необходимо...

Визуализатор формул в Builder
Всем привет! Если кто знает, подскажите пожалуйста можно ли формульные выражения, написанные в c++ Builder (и в Qt), вывести...

Визуализатор быстрой сортировки
Добрый день! Нужно написать программу, которая иллюстрирует работу быстрой сортировки. В частности должно присутствовать: *вывод...

5
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
05.10.2019, 22:48
404_NotFound,

Не так давно была похожая тема, почитайте Эквалайзер на интернет радио может пригодится

Добавлено через 20 минут
404_NotFound,

Вот ваш вариант радио http://some-test.onlinewebshop... isualizer/ кликните по надписи play-radio

HTML5
1
2
3
4
5
6
<div class="play-radio">play-radio</div>
 
<div id="content">
  <canvas id="canvas"></canvas>
  <audio id="audio" controls></audio>
</div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
window.onload = function() {
  
    var file = document.getElementById("thefile");
    var audio = document.getElementById("audio");
 
    document.querySelector('.play-radio').addEventListener('click',() => {
        var files = this.files;
        audio.src = 'http://ic2.101.ru:8000/v1_1';
        audio.crossOrigin = "anonymous";
        audio.load();
        audio.play();
        var context = new AudioContext();
        var src = context.createMediaElementSource(audio);
        var analyser = context.createAnalyser();
 
        var canvas = document.getElementById("canvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var ctx = canvas.getContext("2d");
 
        src.connect(analyser);
        analyser.connect(context.destination);
 
        analyser.fftSize = 256;
 
        var bufferLength = analyser.frequencyBinCount;
        console.log(bufferLength);
 
        var dataArray = new Uint8Array(bufferLength);
 
        var WIDTH = canvas.width;
        var HEIGHT = canvas.height;
 
        var barWidth = (WIDTH / bufferLength) * 2.5;
        var barHeight;
        var x = 0;
 
        function renderFrame() {
          requestAnimationFrame(renderFrame);
 
          x = 0;
 
          analyser.getByteFrequencyData(dataArray);
 
          ctx.fillStyle = "#000";
          ctx.fillRect(0, 0, WIDTH, HEIGHT);
 
          for (var i = 0; i < bufferLength; i++) {
            barHeight = dataArray[i];
            
            var r = barHeight + (25 * (i/bufferLength));
            var g = 250 * (i/bufferLength);
            var b = 50;
 
            ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
            ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
 
            x += barWidth + 1;
          }
        }
        audio.play();
        renderFrame();
    });
};
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#thefile {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
}
 
#canvas {
  position: fixed;
  left: 0;
  top: 40px;
  width: 100%;
  height: 90%;
}
 
audio {
  position: fixed;
  left: 10px;
  bottom: 10px;
  width: calc(100% - 20px);
}
Добавлено через 2 минуты
Цитата Сообщение от 404_NotFound Посмотреть сообщение
получаю ту же ошибку
Решается добавлением
JavaScript
1
audio.crossOrigin = "anonymous";
1
1 / 1 / 0
Регистрация: 07.03.2018
Сообщений: 31
05.10.2019, 23:14  [ТС]
Спасибо!
Но, возникла другая проблема, если я добавляю
JavaScript
1
audio.crossOrigin = "anonymous";
тогда радиостанция
HTML5
1
http://online2.radiorelax.ua/RadioRelax_Instrumental
не запускается, получаю ошибку:
Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на http://online2.radiorelax.ua/R... strumental. (Причина: отсутствует заголовок CORS «Access-Control-Allow-Origin»).
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
05.10.2019, 23:30
404_NotFound,

Везде пишут что на стороне сервера, который отдает поток, нужно вносить правки в разные файлы типа htaccess и т.д. Вот почитайте https://askvoprosy.com/voprosy... strictions
0
1 / 1 / 0
Регистрация: 07.03.2018
Сообщений: 31
06.10.2019, 16:45  [ТС]
Хорошо, а есть ли возможность сделать визуализацию звука без использования AudioContext(); ?
0
Юзер с абсолютным слухом
 Аватар для Опан
709 / 489 / 195
Регистрация: 17.12.2010
Сообщений: 1,428
06.10.2019, 21:50
Если требуется визуализировать не обязательно упомянутую радиостанцию, то можете попробовать разные радиопотоки, всегда найдутся такие, что подключаются без проблем. А без web audio api можно визуализировать аудиофайлы формата WAV.
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
06.10.2019, 21:50
Помогаю со студенческими работами здесь

Вакансия: 3D-визуализатор (Москва)
Московская компания, ведущий российский дистрибьютор компьютерной техники, приглашает 3D-визуализатора. Задачи: - построение 3D...

Визуализатор для плеера.
Всем доброго вечера) у меня проблемки с курсовой работой:( преподаватель сам создал мне проблему, а как решить ее он даже подсказать не...

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

Визуализатор графиков по заданной функции на некотором диапазоне
Добрый день, используя winApi нужно сделать такое задание. Получилось сделать отдельные функции типа sin, cos. Но чтобы задавать функцию и...

Визуализатор XML отображает уже стилизованную форму с данными
Копаюсь с данными из росреестра. Требуется парсить полученные от него xml файлы и далее печатать их. На самом сайте есть возможность...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru