JSFiddle - React, Tailwind, and code Playground

by Barinskaya

HTML

<div id="pic" style="background: url(https://cdn.pixabay.com/photo/2015/02/01/10/17/music-619256_1280.jpg) no-repeat; background-size: cover; position: absolute; top: 0; left:0; width: 100%; height: 100%">
</div>
<audio autoplay>
   <source src="Оркестр Лондонских Променад-концертов - К Элизе">
</audio>

JavaScript

var neuroplay = null;
var control = 0;

function bci(data)
{
		//В этой функции необходимо преобразовывать входящий сигнал (медитацию ИЛИ концентрацию) 
    //и превращать его в управляющее воздействие
    //data.meditation и data.concentration лежат в диапазоне от 0 до 100

	  $("#med").html(data.meditation + "%
  	$("#con").html(data.concentration + "%    
    
    var incr = 0.5;
    if (data.meditation > 10) audio.volume = 0.8;
    if (data.meditation > 20) audio.volume = 0.7;
    if (data.meditation > 40) audio.volume = 0.5;
    if (data.meditation > 60) audio.volume = 0.3;
    if (data.meditation > 80) audio.volume = 0.2;
    if (data.meditation > 90) audio.volume = 0;
    if (data.meditation > 50)
    {
    	control += incr;
     
    }
    else
    {
    	control -= incr;
    }
    
    if (control < 0) control = 0;
    if (control > 100) control = 100;
    
    var color = Math.floor(255*control/100);
    
    //$("body").css("background-color", "rgb("+color+", "+color+", "+color+")
    $("#pic").css('opacity', control/100);
}

$(function() 
{
		//Этот код выполняет подключение к ПО NeuroPlay
    //10 раз в секунду запрашивает состояние нейроинтерфейса (медитацию, концентрацию и т.д.) 
    neuroplay = new NeuroplayConnector();
    neuroplay.connect();  
    neuroplay.on('bci', bci);
    setInterval(function() { neuroplay.send('bci'); }, 100);
});