Re: Generative soundscape project

Marty Sullivan <[email protected]> Fri, 5 Oct 2012 10:21:02 -0400
Newsgroups	gmane.text.xml.svg.devel
Message-ID	<CAK7bDbL25V4PEVEqZFvfOPSv=bDL7DDeMyD=kU1rV+AAsmqn5A@mail.gmail.com>
I didn't have time to test your svg but I have experimented with embedding
audio into svg before with great results. Here are the steps you should
take:

1. Instead of placing your svg within HTML you should instead make the SVG
a separate file and use an <embed> tag to place it on the page.
2. Put the HTML namespace into your SVG tag like so:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="
http://www.w3.org/1999/xlink" xmlns:html="http://www.w3.org/1999/xhtml" ...
>

3. Put the HTML audio tags directly into your SVG doc like so:

<html:audio id="audioElement">
  <html:source src="sound.mp3" type="audio/mpeg" />
  <html:source src="sound.ogg" type="audio/ogg" />
</html:audio>

4. Interact with the audio element with JavaScript just like you would in
an HTML page.

Hope this helps,
Marty

On Thu, Oct 4, 2012 at 11:54 PM, federico.strazzullo <
[email protected]> wrote:

> **
>
>
> 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
>
>  
>


[Non-text portions of this message have been removed]



------------------------------------

-----
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/