Hi everyone, I have quite an issue with generating audio by clicking on shapes. I looked quite everywhere here, on the net to find a solution. Some examples worked, others not. And when I applied them to my script, it never worked. To explain better, I'd like to click on a shape, then it creates a sound out of it, in order to layer sounds on other sounds progressively. The final goal would be to reach that kind of app:
http://www.youtube.com/watch?v=8zNLlKRrUVk&noredirect=1 I know it would be possible with an SVG interface, which could be done later. SCAPE is a desktop app if I'm not wrong, but we could do it in the browser directly. That would be quite an innovation... Here is the code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="description" content="Original music score interacted with SVG animation" /> <meta name="keywords" content="music,composition,Federico Strazzullo,ambient,SVG,animation" /> <meta name="author" content="Federico Strazzullo" /> <title>SVG and HTML 5 audio</title> </head> <body style="background-color:black;"> <div> <svg width="100%" height="100%" viewBox="0 0 1000 1300" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";> <defs> <radialGradient id="g" cx="2" cy="5" r="200" fx="7" fy="7" spreadMethod="repeat"> <stop offset="10%" stop-color="lightgreen" /> <stop offset="30%" stop-color="indianred" /> <stop offset="70%" stop-color="lightblue" /> <stop offset="100%" stop-color="white" /> <animate attributeName="r" dur="39s" values="20%; 5%; 20%; 5%; 20%; 30%; 20%; 5%; 10%" repeatCount="indefinite" /> </radialGradient> <filter id="blurStar"> <feGaussianBlur stdDeviation="5"/> </filter> <filter id="blurC2"> <feGaussianBlur stdDeviation="10"/> </filter> <filter id="T" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feTurbulence type="turbulence" baseFrequency=".01" numOctaves="1" result="noise" /> <feComposite in="noise" in2="SourceAlpha" operator="in" /> <feComponentTransfer> <feFuncA type="linear" intercept="1" slope="0" /> </feComponentTransfer> </filter> <filter id="blurC3"> <feGaussianBlur stdDeviation="10"/> </filter> <filter id="blurBlueNebula"> <feGaussianBlur stdDeviation="50"/> </filter> <filter id="blurBrownNebula"> <feGaussianBlur stdDeviation="30"/> </filter> <filter id="blurBrownNebula2"> <feGaussianBlur stdDeviation="65"/> </filter> </defs> <polygon points="20,300 -50,600 0,800 200,1000 500,900 1000,1100 900,700 1100,320 500,250" fill="mediumblue" fill-opacity=".3" filter="url(#blurBlueNebula)" display="none"> <set begin="C2.click" attributeName="display" to="block" /> </polygon> <g display="none"> <polygon points="-50,250 20,300 60,360 200,400 400,500 60,600 0,500 -150,600" fill="saddlebrown" fill-opacity=".3" filter="url(#blurBrownNebula)" /> <polygon points="500,1000 600,800 700,360 800,400 900,500 1000,600 1100,500 1200,600" fill="saddlebrown" fill-opacity=".3" filter="url(#blurBrownNebula2)" /> <polygon points="0,900 400,800 70,300 0,700" fill="saddlebrown" fill-opacity=".3" filter="url(#blurBrownNebula2)" /> <polygon points="900,250 1200,300 1050,700 750,550 400,200" fill="saddlebrown" fill-opacity=".3" filter="url(#blurBrownNebula2)" /> <set begin="C3.click" attributeName="display" to="block" /> </g> <clipPath id="CP"> <circle r="100" cx="500" cy="650" fill="black"> <animate attributeName="r" dur="183s" values="100; 300; 100" repeatCount="indefinite" /> </circle> </clipPath> <rect id="C" x="200" y="350" width="600" height="600" clip-path="url(#CP)" filter="url(#T)"> <animateTransform attributeName="transform" type="rotate" from="0 500 650" to="360 500 650" dur="91.5s" repeatCount="indefinite" /> </rect> <circle id="C2" r="50" cx="700" cy="650" display="none" fill="red" fill-opacity=".75" filter="url(#blurC2)"> <set begin="C.click" attributeName="display" to="block" /> <animateTransform attributeName="transform" type="rotate" from="360 500 650" to="0 500 650" dur="15s" repeatCount="indefinite" /> </circle> <circle id="C3" r="50" cx="700" cy="650" fill="white" fill-opacity=".75" display="none" filter="url(#blurC3)"> <set begin="C.click" attributeName="display" to="block" /> <animateTransform attributeName="transform" type="rotate" from="0 500 650" to="360 500 650" dur="15s" repeatCount="indefinite" /> </circle> </svg> </div> <audio autoplay="true"> <source src="Bubble.mp3" type="audio/mpeg"/> <source src="Bubble.ogg" type="audio/ogg"/> </audio> <div> <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/"; target="_blank"><img alt="Licence Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/80x15.png"; /></a> </div> </body> </html> Cheers, Federico ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
![http://i.creativecommons.org/l/by-nc-nd/3.0/80x15.png"](http://i.creativecommons.org/l/by-nc-nd/3.0/80x15.png"){kind=link}