YUI + SoundManager 2 | Demo: A Noisy DOM

This example uses YUI to handle common DOM events such as clicks, scrolling and key presses on form elements and makes calls to SoundManager 2 (JS + Flash Sound API) which handles the sound effects. YUI's drag/drop library and slider widget are also shown. Interacting with the widgets on the page will trigger different sounds.

Things to try:

• Click on everything (except default links, nothing special there.)
• Type in the textarea below. (Enter key, too. :D)
• Scroll the textarea, try dragging the scroller widget. Try moving quickly, slowly, in jerky motions etc for different results. (Note: Scroll may not work in Opera, my bad.)
• Click and drag the box, left-to-right.

Note that this is a silly/fun example and is not recommended for practical use, unless you're building a web site for kids or something like that. ;)

Javascript + Flash 9 is required for this demo (see the SoundManager 2 home page for more info, API demos etc.)

HTML 5 should ultimately eliminate the reliance on Flash for audio embedding like this, and simplify the work to an <audio> element in the future.

Type things (and push [enter]) in this box. Scroll it for extra noise. This example uses YUI to handle common DOM events such as clicks, scrolling and key presses on form elements. YUI's drag/drop library and slider widget are also shown. Interacting with the widgets on the page will trigger different sounds. Things to try: * Click on everything. * Type in the box. (Enter key, too. :D) * Scroll the textarea below, try dragging the scroller widget. * Click and drag the box, left-to-right. Note that this is a silly/fun example and is not recommended for practical use, unless you're building a web site for kids or something like that. ;) HTML 5 should ultimately eliminate the reliance on Flash for audio embedding like this, and simplify the work to a simple <audio> element in the future. Cras iaculis sapien ac turpis dictum facilisis. Proin interdum mollis aliquet. Duis scelerisque erat ac arcu iaculis quis porta dui commodo. Suspendisse et hendrerit justo. Aenean ornare dignissim pellentesque. Ut at accumsan erat. Maecenas blandit, elit vel rhoncus adipiscing, lorem risus pulvinar nulla, eget lacinia lectus magna a nunc. Nam at velit at sem tincidunt pellentesque in sed dui. Etiam tempus turpis vitae ligula vestibulum vel ullamcorper sapien consequat. Fusce dapibus, felis in venenatis mattis, sapien enim gravida massa, nec dignissim eros ligula et orci. Nunc enim nibh, sagittis sit amet rhoncus quis, mattis id odio. Nullam fermentum hendrerit odio, mollis adipiscing nibh tincidunt in. Phasellus accumsan mauris ut ligula semper et porta lacus euismod. Phasellus in est eget ligula ullamcorper cursus. Phasellus blandit nibh vitae odio sagittis a dictum orci placerat. Nullam varius, elit in suscipit bibendum, tortor lectus scelerisque sapien, in sagittis lorem nisi eget dui. Nunc dignissim quam in quam faucibus molestie. Morbi facilisis ante at metus fermentum semper. Etiam euismod hendrerit scelerisque. Phasellus in arcu eu tellus adipiscing ultrices. Nam ut ante lectus, sed volutpat turpis. In nunc lectus, tristique quis accumsan ut, lobortis vel augue. Nam in dolor nec nunc accumsan lobortis id sollicitudin lorem. Ut rutrum lorem lacinia odio vehicula aliquet. Praesent volutpat purus eget ante mollis luctus. Pellentesque quis tortor sapien. Proin turpis est, blandit sit amet suscipit eget, dignissim eget quam. In varius rhoncus sagittis. Donec quis tortor sed nisi vestibulum elementum. Praesent nulla erat, feugiat sed pellentesque vel, scelerisque quis nisl. Maecenas nec urna ac libero convallis gravida eu lobortis velit. Aenean rutrum blandit massa, nec laoreet magna ullamcorper ut. Fusce orci erat, eleifend eu vehicula a, tempor nec nisl. Proin aliquam volutpat orci sit amet lobortis. Etiam porttitor sapien imperdiet eros gravida ultricies. Praesent semper ipsum sed lacus tincidunt eu vulputate massa scelerisque. Fusce porta venenatis arcu et gravida. Quisque nulla elit, vestibulum eu sollicitudin quis, tempus in risus. Nam eleifend blandit elementum. Mauris consectetur tortor vel arcu pellentesque id vestibulum purus pulvinar. Aenean cursus pretium ipsum cursus vestibulum. Quisque rutrum urna eu erat vestibulum non accumsan ante adipiscing. Cras gravida, dui a egestas luctus, purus nibh condimentum ipsum, non mollis enim libero vel elit. Nulla lorem metus, euismod sit amet lobortis ut, fermentum ac ipsum. Mauris id risus a nunc viverra viverra. Duis id lectus sed felis tristique gravida. Integer cursus, sem consequat ultricies tempus, elit sem tempor lacus, ut iaculis nulla erat quis tellus. Nullam ac diam in massa eleifend ornare id in quam. Suspendisse malesuada bibendum tortor, in consectetur quam viverra non. Suspendisse sit amet velit ac felis vulputate hendrerit. Sed tempor pulvinar scelerisque.

Related YUI + SM2 demo: Play MP3 Links Inline

This page is a demo from a YUI Blog article on YUI + SoundManager 2.