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

Generative soundscape project

Expand Messages
  • federico.strazzullo
    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
    Message 1 of 2 , Oct 4, 2012
    • 0 Attachment
      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
    • 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 2 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.