A new voice every two seconds! #audio #… by f8f82804

function u(t) {

c.width=1920 // clear the canvas
for(i=0;i<9;i++)
x.fillRect(400+i*100+S(t)*300,400,50,200) // draw 50x200 rects

} // 122/140

Please log in (or register) to post a dweet (copy-paste the code somewhere safe to save it meanwhile)


    u(t) is called 60 times per second.
    t: Elapsed time in seconds.
    S: Shorthand for Math.sin.
    C: Shorthand for Math.cos.
    T: Shorthand for Math.tan.
    R: Function that generates rgba-strings, usage ex.: R(255, 255, 255, 0.5)
    c: A 1920x1080 canvas.
    x: A 2D context for that canvas.

show FPS hide FPS share 1 remix fullscreen

f8f82804

remix of d/3023 by u/joeytwiddle

function u(t) {

if(t%2<.01)with(speechSynthesis)V=getVoices()[t>>1],(U=new SpeechSynthesisUtterance(n=V.name)).voice=V,c.width=99,x.fillText(n,0,9),speak(U)

Sep 7 2018 5:27 PM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

A new voice every two seconds! #audio #speaking #halting

Show more comments…
u/lionleaf

Man, I was not expecting sound. Is there a way we could make all sound dweets click to play/unmute?
u/f8f82804

I try really hard to make my audio dweets stop when you scroll away. Other than that, I'm not sure how to tackle it from the site side... With speechSynthesis we can just add pause() and resume() calls to the dweet pausing/resuming code (see https://developer.mozilla.org/en-US/docs/Web…). For AudioContext however, I think we'd need a set of bindings to create instances that register them with the dweet pause/resume hooks.
u/f8f82804

I also just realized that firefox won't mute speechSynthesis even though it shows an audio icon...
u/yonatan

Chrome won't mute it either.
u/katkip

That's genius
u/joeytwiddle

@f8f82804 The first stage, we can simply not autoplay audio dweets. https://git.io/fA2Bp


      u(t) is called 60 times per second.
      t: elapsed time in seconds.
      c: A 1920x1080 canvas.
      x: A 2D context for that canvas.
      S: Math.sin
      C: Math.cos
      T: Math.tan
      R: Generates rgba-strings, ex.: R(255, 255, 255, 0.5)

dwitter.net