Generative soundscape project
"federico.strazzullo" <[email protected]>
| Newsgroups | gmane.text.xml.svg.devel |
|---|---|
| Message-ID | <[email protected]> |
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/