Distortions on air

From Media Design: Networked & Lens-Based wiki
Jump to navigation Jump to search

The Distortions on Air will be an attempt to navigate through our current (past or future) thoughts, research threads and vocal memories via distorted voices and different languages. To do that we will explore the concepts of 'code-switching' and 'audio mask'.

'Code-switching' occurs when a speaker alternates between two or more languages in the context of a single conversation or situation. There are several reason that somebody uses this technique. The 'audio mask' is a term borrowed from Laurie Anderson and refers to the electronic alteration of the voice. Similar to the theatrical mask, this audio mask served Laurie to transform her present voice into the recorded and polyphonic speech of a machine. She used it to transform to a man on stage.

We will visit different scripts of vocal distortions and reflect together on ideas, that expand to the digital/online realm and datasets, through our collective or individual alter egos. We could alternate from codes we use daily to coding languages, mother tongues, from less formal to more formal settings. The voice you choose may represent you, may not, may be unknown to others, or represent something you are against to. A voice that may be rejected or misinterpreted but helps you speak to the public. You may also use a confusing and ambiguous language, and an accent that sounds annoying to others.

This vocal online dialogue will happen through the exchange of small voice samples that we will produce. Our voice data will be processed and reconsidered. What happens when voice samples separate from us and in what contexts do they travel? Are they accumulated together with others? Do they scatter or disappear?

https://radioactive.w-i-t-m.net/

notes of today: https://pad.xpub.nl/p/distortions_on_air

An imaginative diagram explaining a web-audio distortion of vocal inputs online in the project Radio-active Monstrosities https://radioactive.w-i-t-m.net/. The graphic visualizes an 'echo' audio mask. It has been inspired by the Lawrence Abu Hamdan's Code Switching drawing.


Lawrence Abu Hamdan, Code Switching, 2014
::::::..... ....... ....... ..D i s t o r t i o n s O n A i r. ... ..... .::::::::::::...... . >>>

<<<.. .. ::::::....... ....Radio Implicancies - Special Issue #15. .... ... ... . ...... ..... ..::::......

Distortions as 'audio masks'

  • Lowpass filter: gendered voice on air
  • Lowpitch filter: from female to male
  • Echo filter
  • Human microphone

'damaged' voices | clips

podcast Ballout, D. (2019) ‘Good Morning, Kafranbel’, This American Life: Wartime Radio
podcast Gladstone, B. and Garfield, B. (2019) ‘How Radio Makes Female Voices Sound “Shrill”’, The Disagreement Is The Point. On the Media
article Singh, A. (2018) ‘Jason Cundy: women’s voices are too high for football commentary’, The Telegraph, 25 June
article Moraine, S. (2011) '“Mic check!”: #occupy, technology & the amplified voice', The Society Pages, 6 October and video Angela Davis Occupy Wall St @ Washington Sq Park Oct 30 2011 General Strike November 2


online scripts (web-audio)

Scripts are made with web-audio api: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

Lowpass

 1 <!DOCTYPE html>
 2 <html lang="en" dir="ltr">
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1">
 6   <title></title>
 7 </head>
 8 <body>
 9   <p><button id="btnStart">START RECORDING</button>
10     <button id="btnStop">STOP RECORDING</button>
11   </p>
12   <h2>Lowpass</h2>
13   <audio id="player" controls>
14   </audio><br>
15   <script>
16     let constraintObj = {
17       audio: true,
18       video: false
19     };
20     //handle older browsers that might implement getUserMedia in some way
21     if (navigator.mediaDevices === undefined) {
22       navigator.mediaDevices = {};
23       navigator.mediaDevices.getUserMedia = function(constraintObj) {
24         let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
25         if (!getUserMedia) {
26           return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
27         }
28         return new Promise(function(resolve, reject) {
29           getUserMedia.call(navigator, constraintObj, resolve, reject);
30         });
31       }
32     } else {
33       navigator.mediaDevices.enumerateDevices()
34         .then(devices => {
35           devices.forEach(device => {
36             console.log(device.kind.toUpperCase(), device.label);
37             //, device.deviceId
38           })
39         })
40         .catch(err => {
41           console.log(err.name, err.message);
42         })
43     }
44 
45     navigator.mediaDevices.getUserMedia(constraintObj)
46       .then(function(mediaStreamObj) {
47         let audio = document.querySelector('audio');
48         audio.onloadedmetadata = function(ev) {
49           audio.play();
50         };
51 
52         //add listeners for saving audio
53         let start = document.getElementById('btnStart');
54         let stop = document.getElementById('btnStop');
55         let audSave = document.getElementById('player');
56         let mediaRecorder = new MediaRecorder(mediaStreamObj);
57         let chunks = [];
58 
59         start.addEventListener('click', (ev) => {
60           mediaRecorder.start();
61           console.log(mediaRecorder.state);
62         })
63         stop.addEventListener('click', (ev) => {
64           mediaRecorder.stop();
65           console.log(mediaRecorder.state);
66         });
67         mediaRecorder.ondataavailable = function(ev) {
68           chunks.push(ev.data);
69         }
70         mediaRecorder.onstop = (ev) => {
71           let blob = new Blob(chunks, {
72             'type': 'audio/mp3;'
73           });
74           chunks = [];
75           var context = new AudioContext();
76           let audioURL = window.URL.createObjectURL(blob);
77           // lowpass
78           source = context.createMediaElementSource(player);
79           var biquadFilter = context.createBiquadFilter();
80           biquadFilter.type = "lowpass";
81           biquadFilter.frequency.value = 400;
82           biquadFilter.gain.value = 25;
83           source.connect(biquadFilter);
84           biquadFilter.connect(context.destination);
85           audSave.src = audioURL;
86           console.log(audSave.src);
87         }
88       })
89       .catch(function(err) {
90         console.log(err.name, err.message);
91       });
92   </script>
93 </body>
94 
95 </html>

Lowpitch

 1 <!DOCTYPE html>
 2 <html lang="en" dir="ltr">
 3 
 4 <head>
 5   <meta charset="utf-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title></title>
 8 </head>
 9 
10 <body>
11   <p><button id="btnStart">START RECORDING</button>
12     <button id="btnStop">STOP RECORDING</button>
13   </p>
14 
15   <h2>Lowpitch</h2>
16 
17   <script>
18     let constraintObj = {
19       audio: true,
20       video: false
21     };
22 
23     //handle older browsers that might implement getUserMedia in some way
24     if (navigator.mediaDevices === undefined) {
25       navigator.mediaDevices = {};
26       navigator.mediaDevices.getUserMedia = function(constraintObj) {
27         let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
28         if (!getUserMedia) {
29           return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
30         }
31         return new Promise(function(resolve, reject) {
32           getUserMedia.call(navigator, constraintObj, resolve, reject);
33         });
34       }
35     } else {
36       navigator.mediaDevices.enumerateDevices()
37         .then(devices => {
38           devices.forEach(device => {
39             console.log(device.kind.toUpperCase(), device.label);
40             //, device.deviceId
41           })
42         })
43         .catch(err => {
44           console.log(err.name, err.message);
45         })
46     }
47 
48     navigator.mediaDevices.getUserMedia(constraintObj)
49       .then(function(mediaStreamObj) {
50         //add listeners for saving audio
51         let start = document.getElementById('btnStart');
52         let stop = document.getElementById('btnStop');
53         let mediaRecorder = new MediaRecorder(mediaStreamObj);
54         let chunks = [];
55 
56         start.addEventListener('click', (ev) => {
57           mediaRecorder.start();
58           console.log(mediaRecorder.state);
59         })
60         stop.addEventListener('click', (ev) => {
61           mediaRecorder.stop();
62           console.log(mediaRecorder.state);
63         });
64         mediaRecorder.ondataavailable = function(ev) {
65           chunks.push(ev.data);
66         }
67         mediaRecorder.onstop = (ev) => {
68           let blob = new Blob(chunks, {
69             'type': 'audio/mp3;'
70           });
71           chunks = [];
72           var context = new AudioContext();
73           let audioURL = window.URL.createObjectURL(blob);
74 
75           window.fetch(audioURL)
76             .then(response => response.arrayBuffer())
77             .then(arrayBuffer => context.decodeAudioData(arrayBuffer))
78             .then(audioBuffer => {
79 
80               function play() {
81                 context.close()
82                 context = new AudioContext();
83                 source = context.createBufferSource();
84                 source.buffer = audioBuffer;
85                 source.playbackRate.value = 0.65;
86                 source.connect(context.destination);
87                 source.start();
88               }
89 
90               play();
91             });
92         }
93       })
94       .catch(function(err) {
95         console.log(err.name, err.message);
96       });
97   </script>
98 </body>
99 </html>

Echo

Download https://gitlab.com/nglk/radioactive/-/blob/master/js/reverb.js and put it in a js folder

  1 <!DOCTYPE html>
  2 <html lang="en" dir="ltr">
  3 
  4 <head>
  5   <meta charset="utf-8">
  6   <meta name="viewport" content="width=device-width, initial-scale=1">
  7 </head>
  8 <body>
  9   <p><button id="btnStart">START RECORDING</button>
 10     <button id="btnStop">STOP RECORDING</button>
 11   </p>
 12   <h2>Echo</h2>
 13   <audio id="player" controls>
 14   </audio><br>
 15   <script src="js/reverb.js"></script>
 16   <script>
 17     var masterNode;
 18     var bypassNode;
 19     var delayNode;
 20     var feedbackNode;
 21     let constraintObj = {
 22       audio: true,
 23       video: false
 24     };
 25     //handle older browsers that might implement getUserMedia in some way
 26     if (navigator.mediaDevices === undefined) {
 27       navigator.mediaDevices = {};
 28       navigator.mediaDevices.getUserMedia = function(constraintObj) {
 29         let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
 30         if (!getUserMedia) {
 31           return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
 32         }
 33         return new Promise(function(resolve, reject) {
 34           getUserMedia.call(navigator, constraintObj, resolve, reject);
 35         });
 36       }
 37     } else {
 38       navigator.mediaDevices.enumerateDevices()
 39         .then(devices => {
 40           devices.forEach(device => {
 41             console.log(device.kind.toUpperCase(), device.label);
 42             //, device.deviceId
 43           })
 44         })
 45         .catch(err => {
 46           console.log(err.name, err.message);
 47         })
 48     }
 49 
 50     navigator.mediaDevices.getUserMedia(constraintObj)
 51       .then(function(mediaStreamObj) {
 52         let audio = document.querySelector('audio');
 53         audio.onloadedmetadata = function(ev) {
 54           audio.play();
 55         };
 56 
 57         //add listeners for saving audio
 58         let start = document.getElementById('btnStart');
 59         let stop = document.getElementById('btnStop');
 60         let audSave = document.getElementById('player');
 61         let mediaRecorder = new MediaRecorder(mediaStreamObj);
 62         let chunks = [];
 63 
 64         start.addEventListener('click', (ev) => {
 65           mediaRecorder.start();
 66           console.log(mediaRecorder.state);
 67         })
 68         stop.addEventListener('click', (ev) => {
 69           mediaRecorder.stop();
 70           console.log(mediaRecorder.state);
 71         });
 72         mediaRecorder.ondataavailable = function(ev) {
 73           chunks.push(ev.data);
 74         }
 75         mediaRecorder.onstop = (ev) => {
 76           let blob = new Blob(chunks, {
 77             'type': 'audio/mp3;'
 78           });
 79           chunks = [];
 80           var context = new AudioContext();
 81           let audioURL = window.URL.createObjectURL(blob);
 82           source = context.createMediaElementSource(player);
 83           reverbjs.extend(context);
 84           // 2) Load the impulse response; upon load, connect it to the audio output.
 85           var reverbUrl = "http://reverbjs.org/Library/SportsCentreUniversityOfYork.m4a";
 86           var reverbNode = context.createReverbFromUrl(reverbUrl, function() {
 87             reverbNode.connect(context.destination);
 88           });
 89           //create an audio node from the stream
 90           delayNode = context.createDelay(100)
 91           feedbackNode = context.createGain();
 92           bypassNode = context.createGain();
 93           masterNode = context.createGain();
 94 
 95           //controls
 96           delayNode.delayTime.value = 3.5;
 97           feedbackNode.gain.value = 0.3;
 98           bypassNode.gain.value = 1;
 99           source.connect(reverbNode);
100           reverbNode.connect(delayNode);
101 
102           delayNode.connect(feedbackNode);
103           feedbackNode.connect(bypassNode);
104           // delayNode.connect(bypassNode);
105           bypassNode.connect(masterNode);
106           masterNode.connect(context.destination);
107 
108           audSave.src = audioURL;
109           console.log(audSave.src);
110         }
111       })
112       .catch(function(err) {
113         console.log(err.name, err.message);
114       });
115   </script>
116 </body>
117 </html>


Code-switching

Alternate between languages
When using speech recognition tools the accent may not be recognised. An example that has political consequences is: https://gizmodo.com/experts-worry-as-germany-tests-voice-recognition-softwa-1793424680

Exchange voice messages. A dialogue of alter egos

Use the audio output as mic input to play the voice samples and stream them in jitsi.

  • Install JACK and Pavucontrol (Linux)
https://jackaudio.org/downloads/
  • Connect the sources in JACK:

PulseAudioSinkJack.jpeg
https://puredata.info/docs/JackRoutingMultichannelAndBrowserAudio/

  • Change/check input/output in sound settings (select the connected source of JACK)
  • Refresh jitsi and choose the JACK connected source (select NO to the audio check and jitsi will direct you to a list of sources)
  • If it is not working check Pavucontrol. You may need to change the sources in the browser app.
  • To change between normal microphone and JACK change the input in the sound settings. This will happen if you want to use the web-audio scripts, record your self and then play the distortion back in jitsi (in Pavucontrol in input devices choose internal microphone when you come back to JACK)

links of experiments | projects | research