Loading ...
Sorry, an error occurred while loading the content.

Re: [svg-developers] Generative soundscape project

Expand Messages
  • Marty Sullivan
    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.
    Message 1 of 2 , Oct 5, 2012
    • 0 Attachment
      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 <
      federico.strazzullo@...> 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]
    Your message has been successfully submitted and would be delivered to recipients shortly.