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/
![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}