| - |
sanmigueldevichaycocha.com
98546587
Spinning up The Wheels Of Steel... 
More info ♫ « New? Start here.
Welcome to The Wheels Of Steel: Turntables in your browser
(a Web-based DJ prototype)
What are the features like? See a quick demo video of cueing, pitch bending and beat matching using scratch mode.
The basics: Controls
Left-click a track to load it on the left turntable. Right-click or shift + click for the right turntable. Click and drag the needle to seek while the record is playing. If you're one of the "cool kids", you will see "scratch mode" which gives you more realistic DJ features like the demo video.
- ← ↑ → - Crossfader
- [ ] - Pseudo-transform (cross-fader cut / override)
- 1...5 / 6...0: Cue points for left / right deck while playing. First keypress = set cue point, second = recall.
shift+1 = set/update existing point #1, ctrl+1 = delete. - - / +: "Nudge" pitch, adjust speed. Use shift for right turntable. (Scratch mode only.)
- < / >: Start/stop button. +shift to use power dial.
- d: Debug (outline) mode.
- double-click a slider or rotary knob to reset it.
Tips & Tricks
(Note that scratch and pitch bending are only available in "scratch mode".)
Scratching and precision
Once you grab the record, the mouse can move anywhere within the screen without losing position. The closer to the outside of the record, the smoother the mouse movement and scratching effects are.
Record backspin
Grab the record with the mouse and throw it forward or backward for a spin effect. During a backspin, the record will take slightly longer to catch up when it is near zero-velocity. Combine backspin with cue points as a fun way to loop beats.
Pausing the record
If you click and release without moving the mouse, the record will simply pause. This is handy when you want to briefly delay the record without losing tempo. Super-fast clicks can substitute for pitch bending in some cases.
Cue point "drum machine"
While on the left deck, use the number keys 1 through 5 to set cue points (shown as pieces of tape on the record) on bass drums, snares, hi-hats as they happen (look at the waveforms for timing) - and then press those keys again to play those sounds. You can cut, mix and match samples to make your own sequences or drum beats. Combine with brake effects, backspins etc. for even more fun. To over-write an existing cue point, use shift + 1. You can also set cue points when the power is off.
Power scratch / beat juggling effects
Cheat real-world turntable physics by setting a cue point (eg. 1) on a bass drum sound, then scratching over that sound; let the beat run for a bar or two, then hit 1 and click + drag to seamlessly scratch from the beginning of the loop as though you were beat juggling two copies of the same record.
Power brake mix
When a snare or bass drum plays, press < to stop the left deck's motor and produce an electronic brake sound effect; combine this with ← to cut the cross-fader to the left deck to play just this sound, then hit ↓ or → to bring the other turntable back into the mix for the next beat. Using shift + ↓ turns the power off, letting the motor spin down - a longer-running sound than stopping the motor.
Quick pitch bending
To match the other record, grab the pitch slider and drastically change the record speed (e.g., if behind, speed it up +6%); as it nears being in sync, bring it back towards the matching speed (e.g., +1%.)
Bonus URL parameters
- ?scratch=1: Force scratch mode on
- ?scratch=0: Force scratch mode off
- ?debug=1: Enable script + UI debug mode
- ?html5audio=1: Enable HTML5 audio support
- ?raf=1: Enable
requestAnimationFrame()support - ?tripmat=1: "Tripmat" slipmat (like, woah, man.)
- ?skin=yahoo: Yahoo!-themed turntable skin
- ?skin=flickr: Flickr-themed slipmats
Cool kids* get the cool experience.
*(As of 06/2011): Safari 5 or Chrome 12, OS X
There are two things that will determine your experience here:
- Hardware (GPU) acceleration support.
- Flash audio latency ( i.e., not using Windows? :/ )
Both vary based on hardware, OS, drivers and browser.
This prototype won't work for everyone - in fact, it's presently best with Safari 5 or Chrome 12 on OS X. If your browser supports "accelerated rendering" or similar GPU-based layout, you should be able to run "scratch mode" which includes pitch bending, scratching and EQ effects.
Audio latency (lag) will vary depending on your operating system and browser, with advance apologies to Windows users who may get 300+ milliseconds. Sorry, it's apparently an OS-level issue. If your browser can't render nice framerates, audio will be intolerable in scratch mode; you'll get an option to fall back to basic non-scratch mode, which will at least have normal-sounding audio playback.
FAQ-type things
This thing looks broken in my browser. Is there a bug?
This is an experimental demo, rough around the edges, and things may break badly in some browsers. Firefox 4, Safari 5 and Chrome 12 on WinXP + OS X were the primary browsers used and tested during development. (IE 9 and a preview of 10 were tested briefly.) Your mileage may vary with others.
The turntables are slow and my CPU maxes out, that's not very fun. Can this be made faster?
Modern hardware and software is really needed for this demo to perform well. For the best performance, your browser should support hardware acceleration (which depends on your OS and graphics driver support, also.) The demo runs OK on my 2008-era Mac Mini with Safari, but is notably smoother on a new Macbook Pro.
Regardless of your setup, if you get stuttering audio it may help to close other tabs and graphics-heavy applications while trying out the demo.
Scratching sounds kinda glitchy and low-quality. What's up?
There is a direct correlation between audio quality and the developer's math skills, when it comes to scratching and EQ effects. Sorry about that. 
Can I load MP3s from the internet?
Generally speaking, yes. Paste web URLs into the text box below each deck, and hit enter or click → to load.
Note that if you are in scratch mode, the remote site must also have a special Flash crossdomain.xml file for playback to work.
Can I load arbitrary SoundCloud tracks?
If you know your party's extension (and by that I mean the "track ID"), you can load it using the same text box for internet URLs. The format is sc-# where # is the track ID. Only tracks that allow streaming will play.
Does this work on the iPhone, iPad, or another "special snowflake"-type device?
The UI renders OK, but you can't do much with it.
iOS doesn't do flash and doesn't (currently?) support remixing of audio via JavaScript, but HTML5 audio will be used if supported. iOS only allows playing of one sound at a time via JS, however, so you can't mix songs. That said, you can still pinch-zoom in, load and play a record on the left turntable.
Will this work without Flash?
If Flash isn't present, HTML5 audio will be attempted. This will also mean "scratch mode" (including pitch bending and EQ effects) will not be supported and you will be subject to HTML5 audio's quirks, not to mention bugs in my own code in this case.
Can I DJ a house party with this?
In theory, yes. It might be a bit sketchy, but fun for informal events.
If a friend or someone online writes in in saying it worked, I'd consider this fun experiment to be a success. I recommend Safari 5 and a MacBook Pro if you go for it. If you actually pull it off, POIDH! (Pictures Or It Didn't Happen.) Flickr tag: wheelsofsteeldotnet?
On this note, split-channel mixing is on the to-do list. This way, you can cue music on your headphones (say, on the left channel) while your party is hearing the "live mix" only the right channel.
" style="cursor:help">Aboot
This is a side project by Scott Schiller, a Canadian who works at Yahoo! on Flickr and enjoys mixing photography, sound and code together to make shiny things. He occasionally shares things as @schill on Twitter, and appreciates nice feedback.
This project uses SoundManager 2 and other F/OSS-type libraries. The source code is also available on Github.
History + Tech Details
This thing started in February 2011 as a small CSS experiment, and over 12 weeks between evenings and weekends, evolved to cover most of the capabilities of a dual-turntable and mixer console.
Is this "HTML5?"
There are few HTML5 elements in the markup - it's mostly CSS3 at work if anything; the mixer and turntable pitch sliders are 100% CSS, for example. The audio scratch, pitch and EQ effects are handled by Flash. HTML5 audio can be used if flash is not present, but functionality is reduced (i.e., no scratch mode.)
What was the point of all of this, again?
I've wanted to build some sort of browser-based turntable interface for years, but it wasn't really practical until CSS3 came along (making circles and rotation possible) and flash 10, which added support for dynamic audio manipulation. JavaScript APIs for low-level audio are also out there, so it may be possible do this entirely flash-free.
...Why!?
I say, "Why not?" The fun of this (and most previous JavaScript experiments) was starting with a simple idea, while planning a grand scheme - and the challenge of actually determining if the latter was even possible. While there are some notable bugs and limitations, this idea has run a lot further than I ever expected and it was a ton of fun to build. If you try it out, I hope it works OK! 
I'm not satisfied. I want to read, like, 8,000 more words about how this works. And I want pictures. And video.
If you're certain, see The Wheels Of Steel: An Ode To Turntables (in HTML) for all of that.
Credits and Thank-Yous
In no particular order, thanks go out to the following:
- Graphic illustrator Kyle Kesterson from Giant Thinkwell, who provided awesome renderings of the turntable body.
- Patrick Hoesly on Flickr, who published the CC-licensed pattern used for the background: "334: Sunrise Alpha Texture."
- Vancouver-based hip-hop artist SonReal, who granted permission to include some of his music in this demo.
- Kutiman and numerous YouTube users for participating in the Thru-You project (which I was coincidentally sampled in), a wonderful mix of web-sourced music.
- PRGuitarman for making the Nyan Cat .GIF (used here as "album art", with permission!)
- Kelvin Luck and Andre Michelle, for research and code examples regarding pitch bending in AS3/Flash 10.
- Leo Bergman and Kevin Lamping for their work on porting EQ/filter code from C into ActionScript 3.
- Andrew Freiday, for publishing PHP scripts that can read and generate waveforms from MP3 files.
- Phil Parsons for the API-Cache PHP class used here to optimize SoundCloud API calls.
- SoundCloud, for their API which delivers fresh demo music (and the Beastie Boys' latest album) for users to play on these virtual turntables.
- Friends, family and co-workers who patiently listened to my blabbering about this for several months, proof-read my writing and offered helpful feedback on earlier versions of the prototype.
- Old-skool DJs who still keep it real and carry around tons of records, none of that laptop stuff!
Sample music
Left-click a track to load it on the left turntable. Right-click or shift + click for the right turntable. Click start/stop to begin playing a record; you can then click and drag the needle to seek.
- los mirlos- Scratchdisc
- SonReal - Already There Remix ft. Rich Kidd, Saukrates (explicit)
- SonReal - Haunted ft. Ali Milner (explicit)
- Hippo - The Tempest
- Kraddy - Into The Labyrinth
- PANTyRAiD - Testarossa
Thanks to these artists for granting permission to use their music.
Thru-You: Kutiman Mixes YouTube
- The Mother Of All Funk Chords
- This Is What It Became
- I Am New
- Babylon Band
- Someday
- Wait For Me
- Just A Lady
I unknowingly participated in the Thru-You project; a drum machine video I made was sampled for "Wait For Me."
Bonus tracks
- Schill - Armstrong Beat
- Schill - Untitled Groove
- NYAN CAT - UTAU - Nyanyanyanyanyanyanya
(Note: .GIF madness will cause CPU fires, even on "moon computers.")
Hot tracks from SoundCloud
(Note: Waveforms are currently excluded for SC tracks.)
Beastie Boys - Hot Sauce Committee Pt. 2 (via SoundCloud)
The Beasties are pretty web-friendly musicians for making their album available for streaming from SoundCloud. Thanks, dudes.
This is a SoundManager 2 prototype by Scott Schiller (@schill, or say hello.) Want more? Read about The Wheels Of Steel (in HTML).
Mix My Vinmixes - Highly Experimental
Takes a few seconds for the mixes to load HOME ↬
Scratch mode / latency: undefined / Using HTML5 audio, scratch mode not supported / fps: n/a / ram: NaN mb
More info ♫ « New? Start here.
Welcome to The Wheels Of Steel: Turntables in your browser
(a Web-based DJ prototype)
What are the features like? See a quick demo video of cueing, pitch bending and beat matching using scratch mode.
The basics: Controls
Left-click a track to load it on the left turntable. Right-click or shift + click for the right turntable. Click and drag the needle to seek while the record is playing. If you're one of the "cool kids", you will see "scratch mode" which gives you more realistic DJ features like the demo video.
- ← ↑ → - Crossfader
- [ ] - Pseudo-transform (cross-fader cut / override)
- 1...5 / 6...0: Cue points for left / right deck while playing. First keypress = set cue point, second = recall.
shift+1 = set/update existing point #1, ctrl+1 = delete. - - / +: "Nudge" pitch, adjust speed. Use shift for right turntable. (Scratch mode only.)
- < / >: Start/stop button. +shift to use power dial.
- d: Debug (outline) mode.
- double-click a slider or rotary knob to reset it.
Tips & Tricks
(Note that scratch and pitch bending are only available in "scratch mode".)
Scratching and precision
Once you grab the record, the mouse can move anywhere within the screen without losing position. The closer to the outside of the record, the smoother the mouse movement and scratching effects are.
Record backspin
Grab the record with the mouse and throw it forward or backward for a spin effect. During a backspin, the record will take slightly longer to catch up when it is near zero-velocity. Combine backspin with cue points as a fun way to loop beats.
Pausing the record
If you click and release without moving the mouse, the record will simply pause. This is handy when you want to briefly delay the record without losing tempo. Super-fast clicks can substitute for pitch bending in some cases.
Cue point "drum machine"
While on the left deck, use the number keys 1 through 5 to set cue points (shown as pieces of tape on the record) on bass drums, snares, hi-hats as they happen (look at the waveforms for timing) - and then press those keys again to play those sounds. You can cut, mix and match samples to make your own sequences or drum beats. Combine with brake effects, backspins etc. for even more fun. To over-write an existing cue point, use shift + 1. You can also set cue points when the power is off.
Power scratch / beat juggling effects
Cheat real-world turntable physics by setting a cue point (eg. 1) on a bass drum sound, then scratching over that sound; let the beat run for a bar or two, then hit 1 and click + drag to seamlessly scratch from the beginning of the loop as though you were beat juggling two copies of the same record.
Power brake mix
When a snare or bass drum plays, press < to stop the left deck's motor and produce an electronic brake sound effect; combine this with ← to cut the cross-fader to the left deck to play just this sound, then hit ↓ or → to bring the other turntable back into the mix for the next beat. Using shift + ↓ turns the power off, letting the motor spin down - a longer-running sound than stopping the motor.
Quick pitch bending
To match the other record, grab the pitch slider and drastically change the record speed (e.g., if behind, speed it up +6%); as it nears being in sync, bring it back towards the matching speed (e.g., +1%.)
Bonus URL parameters
- ?scratch=1: Force scratch mode on
- ?scratch=0: Force scratch mode off
- ?debug=1: Enable script + UI debug mode
- ?html5audio=1: Enable HTML5 audio support
- ?raf=1: Enable
requestAnimationFrame()support - ?tripmat=1: "Tripmat" slipmat (like, woah, man.)
- ?skin=yahoo: Yahoo!-themed turntable skin
- ?skin=flickr: Flickr-themed slipmats
Cool kids* get the cool experience.
*(As of 06/2011): Safari 5 or Chrome 12, OS X
There are two things that will determine your experience here:
- Hardware (GPU) acceleration support.
- Flash audio latency ( i.e., not using Windows? :/ )
Both vary based on hardware, OS, drivers and browser.
This prototype won't work for everyone - in fact, it's presently best with Safari 5 or Chrome 12 on OS X. If your browser supports "accelerated rendering" or similar GPU-based layout, you should be able to run "scratch mode" which includes pitch bending, scratching and EQ effects.
Audio latency (lag) will vary depending on your operating system and browser, with advance apologies to Windows users who may get 300+ milliseconds. Sorry, it's apparently an OS-level issue. If your browser can't render nice framerates, audio will be intolerable in scratch mode; you'll get an option to fall back to basic non-scratch mode, which will at least have normal-sounding audio playback.
FAQ-type things
This thing looks broken in my browser. Is there a bug?
This is an experimental demo, rough around the edges, and things may break badly in some browsers. Firefox 4, Safari 5 and Chrome 12 on WinXP + OS X were the primary browsers used and tested during development. (IE 9 and a preview of 10 were tested briefly.) Your mileage may vary with others.
The turntables are slow and my CPU maxes out, that's not very fun. Can this be made faster?
Modern hardware and software is really needed for this demo to perform well. For the best performance, your browser should support hardware acceleration (which depends on your OS and graphics driver support, also.) The demo runs OK on my 2008-era Mac Mini with Safari, but is notably smoother on a new Macbook Pro.
Regardless of your setup, if you get stuttering audio it may help to close other tabs and graphics-heavy applications while trying out the demo.
Scratching sounds kinda glitchy and low-quality. What's up?
There is a direct correlation between audio quality and the developer's math skills, when it comes to scratching and EQ effects. Sorry about that.
Can I load MP3s from the internet?
Generally speaking, yes. Paste web URLs into the text box below each deck, and hit enter or click → to load.
Note that if you are in scratch mode, the remote site must also have a special Flash crossdomain.xml file for playback to work.
Can I load arbitrary SoundCloud tracks?
If you know your party's extension (and by that I mean the "track ID"), you can load it using the same text box for internet URLs. The format is sc-# where # is the track ID. Only tracks that allow streaming will play.
Does this work on the iPhone, iPad, or another "special snowflake"-type device?
The UI renders OK, but you can't do much with it.
iOS doesn't do flash and doesn't (currently?) support remixing of audio via JavaScript, but HTML5 audio will be used if supported. iOS only allows playing of one sound at a time via JS, however, so you can't mix songs. That said, you can still pinch-zoom in, load and play a record on the left turntable.
Will this work without Flash?
If Flash isn't present, HTML5 audio will be attempted. This will also mean "scratch mode" (including pitch bending and EQ effects) will not be supported and you will be subject to HTML5 audio's quirks, not to mention bugs in my own code in this case.
Can I DJ a house party with this?
In theory, yes. It might be a bit sketchy, but fun for informal events.
If a friend or someone online writes in in saying it worked, I'd consider this fun experiment to be a success. I recommend Safari 5 and a MacBook Pro if you go for it. If you actually pull it off, POIDH! (Pictures Or It Didn't Happen.) Flickr tag: wheelsofsteeldotnet?
On this note, split-channel mixing is on the to-do list. This way, you can cue music on your headphones (say, on the left channel) while your party is hearing the "live mix" only the right channel.
" style="cursor:help">Aboot
This is a side project by Scott Schiller, a Canadian who works at Yahoo! on Flickr and enjoys mixing photography, sound and code together to make shiny things. He occasionally shares things as @schill on Twitter, and appreciates nice feedback.
This project uses SoundManager 2 and other F/OSS-type libraries. The source code is also available on Github.
History + Tech Details
This thing started in February 2011 as a small CSS experiment, and over 12 weeks between evenings and weekends, evolved to cover most of the capabilities of a dual-turntable and mixer console.
Is this "HTML5?"
There are few HTML5 elements in the markup - it's mostly CSS3 at work if anything; the mixer and turntable pitch sliders are 100% CSS, for example. The audio scratch, pitch and EQ effects are handled by Flash. HTML5 audio can be used if flash is not present, but functionality is reduced (i.e., no scratch mode.)
What was the point of all of this, again?
I've wanted to build some sort of browser-based turntable interface for years, but it wasn't really practical until CSS3 came along (making circles and rotation possible) and flash 10, which added support for dynamic audio manipulation. JavaScript APIs for low-level audio are also out there, so it may be possible do this entirely flash-free.
...Why!?
I say, "Why not?" The fun of this (and most previous JavaScript experiments) was starting with a simple idea, while planning a grand scheme - and the challenge of actually determining if the latter was even possible. While there are some notable bugs and limitations, this idea has run a lot further than I ever expected and it was a ton of fun to build. If you try it out, I hope it works OK!
I'm not satisfied. I want to read, like, 8,000 more words about how this works. And I want pictures. And video.
If you're certain, see The Wheels Of Steel: An Ode To Turntables (in HTML) for all of that.
Credits and Thank-Yous
In no particular order, thanks go out to the following:
- Graphic illustrator Kyle Kesterson from Giant Thinkwell, who provided awesome renderings of the turntable body.
- Patrick Hoesly on Flickr, who published the CC-licensed pattern used for the background: "334: Sunrise Alpha Texture."
- Vancouver-based hip-hop artist SonReal, who granted permission to include some of his music in this demo.
- Kutiman and numerous YouTube users for participating in the Thru-You project (which I was coincidentally sampled in), a wonderful mix of web-sourced music.
- PRGuitarman for making the Nyan Cat .GIF (used here as "album art", with permission!)
- Kelvin Luck and Andre Michelle, for research and code examples regarding pitch bending in AS3/Flash 10.
- Leo Bergman and Kevin Lamping for their work on porting EQ/filter code from C into ActionScript 3.
- Andrew Freiday, for publishing PHP scripts that can read and generate waveforms from MP3 files.
- Phil Parsons for the API-Cache PHP class used here to optimize SoundCloud API calls.
- SoundCloud, for their API which delivers fresh demo music (and the Beastie Boys' latest album) for users to play on these virtual turntables.
- Friends, family and co-workers who patiently listened to my blabbering about this for several months, proof-read my writing and offered helpful feedback on earlier versions of the prototype.
- Old-skool DJs who still keep it real and carry around tons of records, none of that laptop stuff!
Vinmixes 1
Left-click a track to load it on the left turntable. Right-click or shift + click for the right turntable. Click start/stop to begin playing a record; you can then click and drag the needle to seek.
Vinmixes 2
Left-click a track to load it on the left turntable. Right-click or shift + click for the right turntable. Click start/stop to begin playing a record; you can then click and drag the needle to seek.
en linea 63 visitantes (67 clics a subpáginas) ¡Aqui en esta página!
CORP. JQR-Stream
SAN MIGUEL DE VICHAYCOCHA HUARAL
Difundiendo el turismo , el folklore y el comercio
de la provincia de Huaral en el Mundo.
Copyright © 2009 - Todos los derechos reservados. www.sanmigueldevichaycocha.com.pe
Registrarse gratis