जब आप प्रोग्रामर हैं तो कलर म्यूजिक कैसे बनाएं

एक बार जब मैंने एक फिल्म देखी , और वह क्षण मेरी याद में अंकित हो गया , जब फिल्म के मुख्य पात्रों में से एक ने अपने पैर और हाथ को माधुर्य की लय में बढ़ा दिया। तो: न केवल नायक उल्लेखनीय है, बल्कि उसके पीछे मॉनिटर का सेट है।

हाल ही में, कई अन्य लोगों की तरह, चार दीवारों में बिताए समय की मात्रा बहुत बढ़ गई है, और यह विचार आया: "और इस तरह के दृश्य को महसूस करने का सबसे अजीब तरीका क्या है?"

आगे देखते हुए, मैं कहूंगा कि पसंद वेब ब्राउज़र, WebRTC और WebAudio API के उपयोग पर गिर गई।

तो मैंने सोचा, और फिर तुरंत, सरल से (रेडियो उठाएं और ऐसा खिलाड़ी खोजें, जिसमें ऐसा विज़ुअलाइज़ेशन हो) विकल्प को लंबे लोगों तक ले जाएं (क्लाइंट-सर्वर एप्लिकेशन बनाएं जो सॉकेट के माध्यम से रंग के बारे में जानकारी भेजेगा)। और फिर मैंने खुद को यह सोचते हुए पकड़ा: "अब ब्राउज़र में कार्यान्वयन के लिए आवश्यक सभी घटक हैं", इसलिए मैं इसे करने की कोशिश करूँगा।

WebRTC, डेटा को ब्राउज़र से ब्राउज़र (पीयर-टू-पीयर) में स्थानांतरित करने का एक तरीका है, जिसका अर्थ है कि मुझे पहले सर्वर बनाने की ज़रूरत नहीं है। लेकिन वह थोड़ा गलत था। RTCPeerConnection बनाने के लिए, आपको दो सर्वर चाहिए: सिग्नल और ICE। दूसरे के लिए, आप एक तैयार किए गए समाधान का उपयोग कर सकते हैं (STUN या TURN सर्वर कई लिनक्स वितरण के भंडार में हैं)। पहले के साथ कुछ करने की जरूरत है।

प्रलेखन का कहना है कि एक मनमाना दो-तरफ़ा इंटरैक्शन प्रोटोकॉल एक संकेत के रूप में कार्य कर सकता है, और फिर तुरंत वेबस्केट, लॉन्ग पूलिंग या कुछ अलग कर सकता है। मुझे ऐसा लगता है कि सबसे आसान विकल्प कुछ लाइब्रेरी के प्रलेखन से हैलो दुनिया लेना है। और यहाँ एक सरल सिग्नल सर्वर है:

import os
from aiohttp import web, WSMsgType

routes = web.RouteTableDef()
routes.static("/def", os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static') )

@routes.post('/broadcast')
async def word(request):
    for conn in list(ws_client_connections):
        data = await request.text()
        await conn.send_str(data)
    return web.Response(text="Hello, world")

ws_client_connections = set()

async def websocket_handler(request):
    ws = web.WebSocketResponse(autoping=True)
    await ws.prepare(request)

    ws_client_connections.add(ws) 
    async for msg in ws:
        if msg.type == WSMsgType.TEXT:
            if msg.data == 'close':
                await ws.close()
                # del ws_client_connections[user_id]
            else:
                continue
        elif msg.type == WSMsgType.ERROR:
            print('conn lost')
            # del ws_client_connections[user_id]
    return ws

if __name__ == '__main__':

    app = web.Application()
    app.add_routes(routes)
    app.router.add_get('/ws', websocket_handler)
    web.run_app(app)

मैंने क्लाइंट वेबसॉकेट संदेशों के प्रसंस्करण को भी लागू नहीं किया था, लेकिन बस एक POST समापन बिंदु बनाया, जो सभी को संदेश भेजता है। प्रलेखन से कॉपी करने का तरीका मेरी पसंद का है।

इसके अलावा, ब्राउज़रों के बीच WebRTC कनेक्शन स्थापित करने के लिए, एक अधूरा हाय-हाय होता है, और आप कर सकते हैं - और मैं कर सकता हूँ। आरेख बहुत स्पष्ट रूप से दिखाई देता है:

( पृष्ठ से लिया गया चार्ट )

पहले आपको स्वयं कनेक्शन बनाने की आवश्यकता है:

function openConnection() {
   const servers = { iceServers: [
       {
       urls: [`turn:${window.location.hostname}`],
       username: 'rtc',
       credential: 'demo'
     }, 
     {
       urls: [`stun:${window.location.hostname}`]
     }   
  ]};
  let localConnection = new RTCPeerConnection(servers);
  console.log('Created local peer connection object localConnection');
  dataChannelSend.placeholder = '';
  localConnection.ondatachannel = receiveChannelCallback;

  localConnection.ontrack = e => {
    consumeRemoteStream(localConnection, e);
  }
  let sendChannel = localConnection.createDataChannel('sendDataChannel');
  console.log('Created send data channel');

  sendChannel.onopen = onSendChannelStateChange;
  sendChannel.onclose = onSendChannelStateChange;

  return localConnection;
}

, , . createDataChannel() , , addTrack() .

function createConnection() {
  if(!iAmHost){
    alert('became host')
    return 0;
  }
  for (let listener of streamListeners){
    streamListenersConnections[listener] = openConnection()
    streamListenersConnections[listener].onicecandidate = e => {
      onIceCandidate(streamListenersConnections[listener], e, listener);
    };
    audioStreamDestination.stream.getTracks().forEach(track => {
      streamListenersConnections[listener].addTrack(track.clone())
    })
    // localConnection.getStats().then(it => console.log(it))
    streamListenersConnections[listener].createOffer().then((offer) =>
      gotDescription1(offer, listener),
      onCreateSessionDescriptionError
  ).then( () => {
    startButton.disabled = true;
    closeButton.disabled = false;

  });
  }

}

WebAudio API. , , , .

function createAudioBufferFromFile(){
  let fileToProcess = new FileReader();
  fileToProcess.readAsArrayBuffer(selectedFile.files[0]);
  fileToProcess.onload = () => {

    let audioCont = new AudioContext();
    audioCont.decodeAudioData(fileToProcess.result).then(res => {

    //TODO: stream to webrtcnode  
    let source = audioCont.createBufferSource()
    audioSource = source;
    source.buffer = res;
    let dest = audioCont.createMediaStreamDestination()
    source.connect(dest)
    audioStreamDestination =dest;

    source.loop = false;
    // source.start(0)
    iAmHost = true;
    });
  }
}

, , mp3 . AudioContext, MediaStream. , , addTrack() WebRTC .

, createOffer() . , , :

function acceptDescription2(desc, broadcaster) {
  return localConnection.setRemoteDescription(desc)
  .then( () => { 
    return localConnection.createAnswer();
  })  
  .then(answ => {
  return localConnection.setLocalDescription(answ);
  }).then(() => {
        postData(JSON.stringify({type: "accept", user:username.value, to:broadcaster, descr:localConnection.currentLocalDescription}));

  })
}

IceCandiates:

function finalizeCandidate(val, listener) {
  console.log('accepting connection')
  const a = new RTCSessionDescription(val);
  streamListenersConnections[listener].setRemoteDescription(a).then(() => {
    dataChannelSend.disabled = false;
    dataChannelSend.focus();
    sendButton.disabled = false;

    processIceCandiates(listener)

  });
}

:

        let conn = localConnection? localConnection: streamListenersConnections[data.user]
        conn.addIceCandidate(data.candidate).then( onAddIceCandidateSuccess, onAddIceCandidateError);
        processIceCandiates(data.user)

addIceCandidate() .

, .
/( ).

function consumeRemoteStream(localConnection, event) {
  console.log('consume remote stream')

  const styles = {
    position: 'absolute',
    height: '100%',
    width: '100%',
    top: '0px',
    left: '0px',
    'z-index': 1000
  };
Object.keys(styles).map(i => {
  canvas.style[i] = styles[i];
})
  let audioCont = new AudioContext();
  audioContext = audioCont;
  let stream = new MediaStream();
  stream.addTrack(event.track)
  let source = audioCont.createMediaStreamSource(stream)
  let analyser = audioCont.createAnalyser();
  analyser.smoothingTimeConstant = 0;
  analyser.fftSize = 2048;
  source.connect(analyser);
  audioAnalizer = analyser;
  audioSource = source;
  analyser.connect(audioCont.destination)
  render()
}

, . AudioContext , AudioNode.
, createAnalyser() .

:

function render(){
  var freq = new Uint8Array(audioAnalizer.frequencyBinCount);
  audioAnalizer.getByteFrequencyData(freq);
  let band = freq.slice(
    Math.floor(freqFrom.value/audioContext.sampleRate*2*freq.length),
    Math.floor(freqTo.value/audioContext.sampleRate*2*freq.length));
  let avg  = band.reduce((a,b) => a+b,0)/band.length;

  context.fillStyle = `rgb(
        ${Math.floor(255 - avg)},
        0,
        ${Math.floor(avg)})`;
  context.fillRect(0,0,200,200);
  requestAnimationFrame(render.bind(gl));
}

पूरे स्पेक्ट्रम से, एक बैंड को हाइलाइट किया जाता है जिसे एकल ब्राउज़र द्वारा दर्शाया जाएगा, और औसतन, आयाम प्राप्त किया जाता है। अगला, बस लाल और नीले रंग के बीच एक ही आयाम के आधार पर रंग बनाते हैं। कैनवास ड्रा करें।

ऐसा कुछ कल्पना के फल के उपयोग के परिणामस्वरूप दिखता है: