В этом разделе представлены некоторые программные интерфейсы пользователя с применением дополнительных инструментов в виде библиотек: jquery-3.6.3.min.js, jquery-ui.js и других. Все ссылки для загрузки можно увидеть в полном исходном коде данной Web-страницы.
Ввод данных в виде ползунка и дискретного ввода-вывода с произвольным максимумом
Линейный интерфейс с диапазоном от 0 до MAX Интерфейс дискретного ввода-вывода
VALUE   MAX  
Такого рода интерфейсы позволяют взаимодействовать с внешними системами и объектами через интерактивный обмен данными.  Например, с программными приложениями и различными физическими устройствами посредством API. В основе Web решений лежат библиотеки jQuery UI, в частности: jquery-ui.min.js,  jquery-ui.css
Показать код
JavaScripts  
 
Plugin ползунка

<script>
$(document).ready(function(){
$("#slider1").slider({
animate: "slow",
range: "min",
min:0,
max:100,
step:1,
value:10,
slide: function(event, ui){
$('#value').val(ui.value);}
});
});
</script>

Script VALUE

<script>
$(document).ready(function(){
$('#value').keyup(function(){
let new_max = $('#max').val();
new_max = (parseInt(new_max, 10));
let new_value = $('#value').val();
new_value = (parseInt(new_value, 10));
if(new_value > new_max){
new_value = new_max;
$('#value').val(new_value);
$('#tmp').val(new_value);}
else{
$('#tmp').val(new_value);}
$("#slider1").slider({
value:new_value});
});
$('#value').blur(function(){
let new_value = $('#value').val();
if(new_value ==''){$('#value').val(0); $('#tmp').val(0);
$("#slider1").slider({
value:0});
}
});
});
</script>

Script MAX

<script>
$(document).ready(function(){
$('#max').change(function(){
let new_max = $('#max').val();
if(new_max == ''){new_max = 10; $('#max').val(10);}
let new_value = $('#value').val();
new_max = (parseInt(new_max, 10));
new_value = (parseInt(new_value, 10));
if(new_max < 10){
new_max = 10; $('#max').val(10);
}
if(new_value > new_max){
$('#tmp').val(new_value);
new_value = new_max;
$('#value').val(new_value);}
else{
let tmp = $('#tmp').val();
$('#value').val(tmp);
}
$("#slider1").slider({
max:new_max});
});
});
</script>
Динамические выпадающие списки HTML-элемента SELECT
Динамические выпадающие списки HTML-элемента <select> используются для того, чтобы при выборе одного параметра в раскрывающемся списке появлялись дополнительные варианты выбора. Это применяется для работы с развлетвленными алгоритмами с вложенными зависимостями.
Также динамические решения позволяют создавать несколько HTML-списков, состав внутренних элементов которых зависит от выбранного элемента в других. Например, делая выбор в одном списке, пользователь получает отфильтрованный второй список и так далее.
В данном примере выпадающий список формируется исключительно динамически, реальный исходный код содержит лишь открывающий тег <select> с необходимыми атрибутами: имя, класс CSS, идентификатор ID и соответственно закрывающий тег </select>.
После определения группы можно будет выбрать соответствующий элемент или перейти в другую группу. Клик по кнопке "Свернуть все группы" переводит выпадающий список в исходное состояние.
 
Показать код
CSS, HTML и JavaScripts  
 
Стартовый JavaScript для формирования элементов блока Select

<script type="text/javascript">
$(document).ready(function(){
$('#select').append('<option hidden>Выбрать группу элементов</option>');
$('#select').append('<option value="Group-A">Группа элементов A</option>');
$('#select').append('<option value="Group-B">Группа элементов B</option>');
$('#select').append('<option value="Group-C">Группа элементов C</option>');
$('#select_value').val('');
});
</script>

CSS и HTML

select {
appearance: none; /* Убирает стандартное представление */
-webkit-appearance: none; /* Для Chrome и Safari */
-moz-appearance: none; /* Для Firefox */
}
/* Стилизация при наведении */
select:hover {
border-color: #999;
background-color: #FFF;
}
/* Добавляем свой class */
.select{
width: 280px;
outline: none;
padding:8px;
padding-left:15px;
border: 1px solid #999;
border-radius: 3px;
font-size:15px;
background: url("../img/arr.png") no-repeat right;}

<select name="select" class="dropdown" id="select"></select>
<input type="text" id="select_value" class="select_value" placeholder="Status INFO" readonly onMouseDown="return false" />
<input name="button" type="button" value="Свернуть все группы" class="emul" onClick="group();" />

Основной JavaScript

<script type="text/javascript">
$('#select').change(function(){
let selected = $('#select').val();
$('#select_value').val(selected);

if(selected == 'Group-A'){
$('#select option').remove();
$('#select').append('<option hidden>Группа элементов A</option>');
$('#select').append('<option value="Element A1">Элемент 1 группы A</option>');
$('#select').append('<option value="Element A2">Элемент 2 группы A</option>');
$('#select').append('<option value="Element A3">Элемент 3 группы A</option>');
$('#select').append('<option value="Element A4">Элемент 4 группы A</option>');
$('#select').append('<option value="Element A5">Элемент 5 группы A</option>');
$('#select').append('<option disabled></option>');
$('#select').append('<option value="Group-B">Группа элементов B</option>');
$('#select').append('<option value="Group-C">Группа элементов C</option>');
}

/* И так далее для групп B и C */

});
</script>

<script type="text/javascript">
function group(){
$('#select option').remove();
$('#select').append('<option hidden>Выбрать группу элементов</option>');
$('#select').append('<option value="Group-A">Группа элементов A</option>');
$('#select').append('<option value="Group-B">Группа элементов B</option>');
$('#select').append('<option value="Group-C">Группа элементов C</option>');
$('#select_value').val('');
}
</script>
Информационный виджет Progress Bar
В HTML5 добавлен элемент <progress>, который позволяет показывать прогресс выполнения задач, требующих некоторого времени. Например, в процессе загрузки или обновления данных. Для кроссбраузерной стилизации этого элемента и в целом для работоспособности виджета обязателен к использованию следующий CSS файл progress.css
5%
Показать код
HTML и JavaScripts  
 
<head>
<link rel="stylesheet" href="css/progress.css">
<head>

HTML Body Code

<div style="position:relative; z-index:1">
<progress min="0" max="100" value="5" id="progressbar"></progress>
<div class="progress_value" id="progress_value">5%</div>
</div>
<input type="button" class="emul" name="emul" id="emul" value="Запустить эмуляцию" onClick="startbar()">

JavaScript (Обработка данных)

<script language="JavaScript" type="text/javascript">
function startbar(){
$('#progressbar').val(5);
$('#emul').attr('disabled', true);
let progressbar = $('#progressbar'),
max = progressbar.attr('max'),
value = progressbar.val();
// Запуск функции эмуляции прогресса
let loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress_div').html(value + '%');
if (value == max) {
clearInterval(intervalId);
$('#emul').removeAttr('disabled');
}}
let intervalId = setInterval(loading,100);
}
</script>
Информационный виджет Meter Bar
Элемент <meter> применяется для наглядного представления числа, лежащего в заданном диапазоне. Отображается данный элемент в виде горизонтальной полосы, где цветным фоном отмечается текущее значение на шкале. Это удобно использовать в инфографике для визуализации таких данных как дисковое пространство, заряд батареи, уровень сигнала от сторонних физических устройств через специализированные API и т.п.
Пример самого простого элемента: <meter value="0.5"></meter>. Наличие только одного атрибута value всегда даёт зелёную шкалу. Остальные атрибуты по умолчанию: min=0, max=1.
   
Синтаксис элемента: <meter value="???" min="0" max="10" low="5" high="7" optimum="4">
• значение value между min и low даёт зелёную шкалу
• значение value между low и high даёт жёлтую шкалу
• значение value между high и max даёт красную шкалу
Мультимедиа интерфейсы - Web-камера и микрофон
Для On-Line тестирования Web-камеры и микрофона можно запустить проверку видео и звука по клику на кнопках, расположенных справа на панели тестирования. Браузер на основе промиса предложит подтвердить разрешение на подключение камеры и микрофона. При этом полученные данные медиа потоков на сервере не записываются и никуда не передаются.
Включить зеркальное отображение
Проверка передачи video потока Web-камеры
Проверка передачи audio потока с микрофона
Для работы этого Web приложения используются JavaScript plugins: volume_meter.js и volume_main.js
Показать код
JavaScripts подключения и отключения потока с Web-камеры и для тестирования микрофона  
 
<head>
<!-- Include the volume meter component -->
<script src="js/volume_meter.js"></script>
<!-- Include the main app logic -->
<script src="js/volume_main.js"></script>
</head>

Управление Web-камерой

<script>
$('#video_on').click(function webcam_on(){
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video:true})
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (error) {
console.log("Something went wrong!");
});
}});
</script>

<script>
var video = document.querySelector("#videoElement");
var stopVideo = document.querySelector("#video_off");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: false })
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (error) {
});
}
stopVideo.addEventListener("click", stop, false);
function stop(e) {
var stream = video.srcObject;
var tracks = stream.getTracks();
for (var i = 0; i < tracks.length; i++) {
var track = tracks[i];
track.stop();
}
video.srcObject = null;
}
</script>

Управление микрофоном

<script>
$('#status').html('<font color="#008080">Обработчик готов к тестированию микрофона</font>');
$('#meter').css('opacity', '0');
const startButton = document.getElementById('startButton');
startButton.addEventListener('click', async () => {
try {
// Feature detection
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
throw new Error("MediaDevices.getUserMedia is not supported. Update your browser.");
}
// Request audio stream
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
var info = ((stream.getAudioTracks())[0]).readyState; $('#info').val(info); $('#info').click();
var postinfo = $('#info').val(); console.log(postinfo);
var info = ((stream.getAudioTracks())[0]).readyState;
var label = ((stream.getAudioTracks())[0]).label;
$('#meter').css('opacity', '1');
$('#status').html('<font color="#008080">' + label + '</font>');
$('#startButton').attr('disabled', true); $('#startButton').css('cursor', 'default');
console.log(label);
// Stop audio stream
$('#stopButton').click(function(){
stream.getTracks().forEach(track => track.stop());
$('#status').html('<font color="#008080">Audio поток микрофона отключен</font>');
$('#startButton').removeAttr('disabled'); $('#startButton').css('cursor', 'pointer');
var info = ((stream.getAudioTracks())[0]).readyState; $('#info').val(info); $('#info').click();
var postinfo = $('#info').val(); console.log(postinfo);
});
}
catch (error) {
$('#status').html('<font color="#CC0000">Нет audio потока с микрофона</font>');
statusElement.textContent = `Error: ${error.message}`;
console.error("Capture failed:", error);
}
});
console.log();
</script>
Мультимедиа интерфейсы - Web Audio API
Одна из самых интересных фич Web Audio API - это возможность извлекать частоту, форму волны и другие данные из звукового источника, которые могут быть использованы для создания визуализаций.
Визуализация частотного спектра звукового сигнала осуществляется с помощью спектрограммы - графика изменения частотного содержания сигнала во времени. Спектрограмма получается применением оконного преобразования Фурье (STFT) к коротким отрезкам сигнала. Она отображает изменение спектра во времени, превращая звук в тепловую карту, которую могут обрабатывать сверточные нейросети (convolutional neural network, CNN).
В данном разделе представлена визуализация частотного спектра звукового сигнала c Audio плейера браузера. Для наглядности визуализации в качестве Input Stream Audio используются медиа файлы *.ogg. Встроенный в браузер Audio Player был кастомизирован средствами JavaScript и CSS для целей данной презентации.
Область вывода спектрограммы Web Audio Player
Progress 00:00 / 00:00
Volume
 
  Yakuro - Solar Wind
  Yakuro - Mirage
  Enigma - Sadeness
  OTTA Orchestra - Shades of Red
  OTTA Orchestra - Shiny Shape
  J.M. Jarre - Aero
JavaScript анализатора спектра audio потока  
 
Для вывода на экран динамической спектрограммы используется HTML5 Canvas

<div id="ctxconteiner" style="border-left:1px #008080 solid; border-bottom:1px #008080 solid; max-width:516px; height:160px;">
<canvas id="canvas"></canvas></div>

Скрипт анализатора для создания спектрограммы

<script>
window.onload = function() {
var context = new AudioContext();
var src = context.createMediaElementSource(player);
var analyser = context.createAnalyser();
var canvas = document.getElementById("canvas");
canvas.width = 512;
canvas.height =160;
var ctx = canvas.getContext("2d");
gradient = ctx.createLinearGradient(0, 0, 0, 160);
gradient.addColorStop(1.0, '#60EE80');
gradient.addColorStop(0.5, '#FFBB00');
gradient.addColorStop(0.25, '#FF6600');
gradient.addColorStop(0.0, '#FF0000');
src.connect(analyser);
analyser.connect(context.destination);
analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
var barWidth = (WIDTH / bufferLength);
var barHeight;
var x = 0;
function renderFrame() {
requestAnimationFrame(renderFrame);
x = 0;
analyser.getByteFrequencyData(dataArray);
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
for (var i = 0; i < bufferLength; i++) {
barHeight = dataArray[i] * 0.6;
ctx.fillStyle = gradient;
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
x += barWidth + 1;
}}
renderFrame();
};
</script>