Plink-plonk.js – hear webpages render with DOM observer and audio API

https://gist.github.com/tomhicks/6cb5e827723c4eaef638bf9f7686d2d8

by hicksyfern • 6 years ago

248 58 6 years ago

gist.github.com

hicksyfern• 6 years ago

This appears quite useful for debugging renders in web apps, and also just sounds quite cool.

swiley2• 6 years ago

Supposedly Alan Turing used a tool like this for debugging his programs.

nitrogen• 6 years ago

Do you have a link to a source? Sounds interesting

mobiledev2014• 6 years ago

Little known Xcode feature- you can set breakpoints that, instead of breaking, play any sound!

swiley2• 6 years ago

You can do something similar with an AM radio on a minimalist Linux install with nothing in the background.

winrid• 6 years ago

Install NetBSD on the radio for extra effect.

luckylion• 6 years ago

I love this, wow. It's a great idea and I'm sure you could use it as a fun debugging idea for plenty of things.

dvh• 6 years ago

I love how he omitted semicolons so that it cannot be used as bookmarklet.

ylyn• 6 years ago

Just minify it...?

slimed5• 6 years ago

Imagine still using semi-colons in JS source in 2020 and "bookmarklet compatibility" being your reasoning.

lucideer• 6 years ago

upvoted, because yes!

but also, violentmonkey

detaro2• 6 years ago

Anyone have interesting example sites to try it? I thought Youtube would be a good candidate, but very little going on for some reason.

finnegandewitt• 6 years ago

Google maps is pretty funny

lucasyvas• 6 years ago

This is one is my favourite. Zoom in and out and you're a DOM DJ.

Macuyiko• 6 years ago

Facebook is a non-stop symphony

tclover• 6 years ago

I tried with twitch

thesz• 6 years ago

I cannot help but refer to this old, old joke: https://en.wikipedia.org/wiki/Blinkenlights#Etymology

(I used to discern between program stages on 286/386 because sound of power supply was different for different loops)

divbzero• 6 years ago

Just as electric vehicles can have skeuomorphic “engine” sounds for safety [1] or aesthetics [2], I’d love to see a service that emits “fan” noise to track CPU usage.

[1] https://en.wikipedia.org/wiki/Electric_vehicle_warning_sound...

[2] https://electrek.co/2018/03/07/jaguar-i-pace-artificial-moto...

ChrisSD• 6 years ago

I used to have something like that with an old machine with poor, spluttering cooling. You could really tell every time something processor intensive was running.

It was actually quite useful at times. For example, if some webpage was constantly running some heavy javascript, the fans would soon alert me that something was up.

hnuser123456• 6 years ago

I have my motherboard set to run the CPU radiator fans a low-moderate speed at ~50 degrees C and below, but ramp up rapidly approaching 55+, with no hysteresis or gradual ease-in. I can absolutely gauge CPU usage on a second-by-second basis by fan noise. Any transient spikes cause an easily perceptible (but not overwhelming) wooshing.

joshvm• 6 years ago

Well it's true today as well. I know immediately that something's gone wrong if I'm training an ML model and the GPU fan spools down.

terlisimo• 6 years ago

Funny, I once realized my computer was infected with a virus because of the change in sound the HDD would make when launching Windows Commander.

I had AV software running but the virus was new and undetected.

nonbirithm2• 6 years ago

I once did something similar. There is this strace-like program for Windows that captures things like memory allocations or mouse movement as part of the Win32 API. I modified the source so it emitted an OSC message on every trace and sent it to PureData which would output MIDI. The result was, well, pure cacophony. But it was amusing to, for example, belt out a dissonant piano piece by typing in VIM or use calc.exe as a (really shitty) drumpad.

DonHopkins6• 6 years ago

Granular synthesis is great for this kind of stuff. Max/MSP, PD, and CSound have support for that.

https://en.wikipedia.org/wiki/Granular_synthesis

http://www.csounds.com/manual/html/SiggenGranular.html

I made a "musical gas" cellular automata the worked that way, which could have LOTS of audio events happening each frame. Kind of like aerosol MIDI.

It was based on a "Billiard Ball Automata" random brownian motion gas simulation, using the Margolus neighborhood.

https://en.wikipedia.org/wiki/Billiard-ball_computer

https://en.wikipedia.org/wiki/Block_cellular_automaton#Neigh...

It had stationary "microphone" particles whose x-position controlled the left/right stereo pan of the sound, and whose y-position controlled the speed (pitch) of the sound, and you could draw "bumpers" or "barriers" out of microphones to deflect and bottle up the gas particles in high or low pressure chambers.

Both the microphones and gas particles had 4 bits of "payload" that would combine to select one of 16 voices (particle payload) and one of 16 samples of that voice (microphone payload). By the pitch and stereo pan, you could tell where the particles were hitting the microphones, and by the voice and sample, you could tell the value of the microphone and gas particle payloads.

So of course I made "laughing gas" with a set of laugh samples, a "stinky gas" with a set of fart samples (to give the laughing gas something to laugh at), and a "scatting gas" (with samples like Cab Calloway singing), plus several other voices too (like Yes and No gasses for representing boolean values), so you could release just a few or any number or ratio of laughing/farting/scatting gas particles (finely tuning the fart:laugh:scat ratios to your mood). Just a few particles, and you'd only hear the occasional sound, but you could spray in a whole lot of any kind of particle to make a high pressure gas that sounded like a huge crowd of people laughing, farting, or scatting at once.

https://www.youtube.com/watch?v=6ZTuYLj5dbk

Another thing that would work well with musical gas is diffusion limited aggregation, where instead of gas particle making a sound and bouncing when they hit a microphone, they make a sound and freeze into "ice" (another microphone). That way you have to keep adding more gas and growing the crystal bigger to make more sound (but you can use an "ice eraser" (hair dryer) drawing tool to melt frozen crystal back into sublimated gas.

https://en.wikipedia.org/wiki/Diffusion-limited_aggregation

nonbirithm2• 6 years ago

Modular synths like Max and Reaktor are great. You can open up the source of random components and combine them in weird ways to make new instruments. I do wish PD was more useable like Reaktor is. NI had a massive assortment of user-created instruments dating back to 2001 to spend hours poring through.

xrd• 6 years ago

Would love to see a sonic comparison between Todo list apps on the variety of front end frameworks like React, Vue and Svelte.

frank2• 6 years ago

A blind programmer named Karl Dahlke does something similar: he pipes linux console output directly to a speaker to get a quick overview. (then he uses text-to-speech to delve into the details.) I think this hack is less discordant than Dahlke's hack.

DonHopkins6• 6 years ago

https://en.wikipedia.org/wiki/Natalie_Jeremijenko#Live_Wire_...

Live Wire (Dangling String), 1995
In 1995, as an artist-in-residence at Xerox PARC in Palo Alto, California under the guidance of Mark Weiser, she created an art installation made up of LED cables that lit up relative to the amount of internet traffic. The work is now seen as one of the first examples of ambient or "calm" technology.

https://web.archive.org/web/19970619144534/http://www.ubiq.c...

Designing Calm Technology: Mark Weiser and John Seely Brown, Xerox PARC, December 21, 1995.
Introduction: Bits flowing through the wires of a computer network are ordinarily invisible. But a radically new tool shows those bits through motion, sound, and even touch. It communicates both light and heavy network traffic. Its output is so beautifully integrated with human information processing that one does not even need to be looking at it or near it to take advantage of its peripheral clues. It takes no space on your existing computer screen, and in fact does not use or contain a computer at all. It uses no software, only a few dollars in hardware, and can be shared by many people at the same time. It is called the "Dangling String".
Created by artist Natalie Jeremijenko, the "Dangling String" is an 8 foot piece of plastic spaghetti that hangs from a small electric motor mounted in the ceiling. The motor is electrically connected to a nearby Ethernet cable, so that each bit of information that goes past causes a tiny twitch of the motor. A very busy network causes a madly whirling string with a characteristic noise; a quiet network causes only a small twitch every few seconds. Placed in an unused corner of a hallway, the long string is visible and audible from many offices without being obtrusive. It is fun and useful. The Dangling String meets a key challenge in technology design for the next decade: how to create calm technology.
We have struggled for some time to understand the design of calm technology, and our thoughts are still incomplete and perhaps even a bit confused. Nonetheless, we believe that calm technology may be the most important design problem of the twenty-first century, and it is time to begin the dialogue.

[...] (read the whole paper, it's great!)

Dangling String: Let's return to the dangling string. At first it creates a new center of attention just by being unique. But this center soon becomes peripheral as the gentle waving of the string moves easily to the background. That the string can be both seen and heard helps by increasing the clues for peripheral attunement.
The dangling string increases our peripheral reach to the formerly inaccessible network traffic. While screen displays of traffic are common, their symbols require interpretation and attention, and do not peripheralize well. The string, in part because it is actually in the physical world, has a better impedance match with our brain's peripheral nerve centers.
In Conclusion: It seems contradictory to say, in the face of frequent complaints about information overload, that more information could be encalming. It seems almost nonsensical to say that the way to become attuned to more information is to attend to it less. It is these apparently bizarre features that may account for why so few designs properly take into account center and periphery to achieve an increased sense of locatedness. But such designs are crucial. Once we are located in a world, the door is opened to social interactions among shared things in that world. As we learn to design calm technology, we will enrich not only our space of artifacts, but also our opportunities for being with other people. Thus may design of calm technology come to play a central role in a more humanly empowered twenty-first century.

https://www.researchgate.net/figure/The-Dangling-String-by-N...

https://www.ipv6.com/sensors/ubiquitous-computing/

HISTORY: Media wire
Mark Weiser in 1988 articulated the idea of ubiquitous computing for the first time at the Computer Science Lab at Xerox Palo Alto Research Center (PARC). He coined the phrase “ubiquitous computing” and wrote several papers on it. The initial forms of ubiquitous computing include tabs, pads, and boards. The first ever known ubiquitous system was the artist Natalie Jeremijenko’s Live Wire or Dangling String situated at Xerox PARC, under the technical leadership of Mark Weiser.
Mark Weiser suggested the idea of enormous number of ubiquitous computers embedding into everything in our everyday life so that we use them anytime, anywhere without the knowledge of them. Today, ubiquitous computing is still at an early phase as it requires revolutionary software and hardware technologies.

omk• 6 years ago

There are these type of posts on HN that I prefer to tag #HNGold.

pragmaticpandy• 6 years ago

forbes.com is so bad...

Plink-plonk.js – hear webpages render with DOM observer and audio API

Related Stories