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

Re: SVG audio player

Expand Messages
  • Francis Hemsher
    Hi Corey, I don t do animations, but just with a cursory look at your code, one item could be contributing to the problem:
    Message 1 of 8 , Mar 4, 2010
      Hi Corey,
      I don't do animations, but just with a cursory look at your code, one item could be contributing to the problem:
      <animateTransform attributeName="transform" xml:id="bar" begin="sound.begin" ../>

      should 'sound', instead be 'audioFile' ?

      Francis


      --- In svg-developers@yahoogroups.com, "coreymwamba" <coreymwamba@...> wrote:
      >
      > Hello again,
      >
      > I'm still stuck - but perhaps I need to present the code? Or re-phrase the question? I'd appreciate any help!
      >
      > Here's the code for the player at the moment...
      >
      > <?xml version="1.0" standalone="no"?>
      > <svg version="1.2" baseProfile="tiny" xml:id="svg-root" width="36" height="36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xe="http://www.w3.org/2001/xml-events" onload="Init(evt)">
      > <script type="text/javascript"> <![CDATA[
      >
      > var SVGDocument = null;
      > var SVGRoot = null;
      > var pauseButton = null;
      > var playButton = null;
      > var countBar = null;
      > var audioFile = null;
      >
      > function Init(evt) {
      >
      > var svgns = "http://www.w3.org/2000/svg";
      >
      > var xlinkns = "http://www.w3.org/1999/xlink";
      >
      > SVGDocument = evt.target.ownerDocument;
      >
      > SVGRoot = SVGDocument.documentElement;
      >
      > pauseButton = SVGDocument.getElementById("pauseGroup");
      >
      > playButton = SVGDocument.getElementById("playGroup");
      >
      > countBar = SVGDocument.getElementById("bar");
      >
      > audioFile = SVGDocument.getElementById("sound");
      >
      >
      >
      >
      > };
      >
      >
      >
      > function pause()
      > {
      > SVGRoot.pauseAnimations();
      > pauseButton.setAttributeNS(null, "display", "none");
      > playButton.setAttributeNS(null, "display", "inline");
      > };
      >
      >
      > function play()
      > {
      >
      > playButton.setAttributeNS(null, "display", "none");
      > pauseButton.setAttributeNS(null, "display", "inline");
      > audioFile.setAttributeNS(null, "begin", "0");
      > countBar.setAttributeNS(null, "begin", "0");
      > SVGRoot.unpauseAnimations();
      > };
      >
      > if (audioFile.endElement())
      > {
      > playButton.setAttributeNS(null, "display", "inline");
      > pauseButton.setAttributeNS(null, "display", "none");
      > };
      > ]]> </script>
      > <defs>
      > <linearGradient y2="0.38672" x2="0.73828" y1="0.38672" x1="0.27734" id="svg_3">
      > <stop stop-opacity="1" stop-color="#007f3f" offset="0" />
      > <stop stop-opacity="1" stop-color="#00bfbf" offset="1" />
      > </linearGradient>
      > </defs>
      > <g id="player" transform="scale(0.2,0.2) translate(2,0)">
      >
      > <circle fill-opacity="0" stroke-width="10" stroke="url(#svg_3)" fill="#ffffff" id="progr" r="72.89719" cy="82.49263" cx="77.89719" />
      > <circle fill-opacity="0" stroke-dasharray="null" stroke-width="5" stroke="#5656ff" fill="#ffffff" id="marker" r="8" cy="9.2" cx="76.89719">
      >
      > <animateTransform attributeName="transform" xml:id="bar" begin="sound.begin" values="0 77.89719 82.49263;360 77.89719 82.49263" calcMode="linear" type="rotate" dur="30s" fill="remove" />
      > <audio id="sound" begin="play.click" xlink:href="../freebies/sounds/rtotp.ogg" dur="30s" />
      > </circle>
      >
      >
      > <g id="controls">
      > <a id="playGroup" display="inline" onclick="play()">
      > <path stroke-dasharray="null" stroke-width="16" stroke="#5fbf00" fill-opacity="0" fill="#5fbf00" id="play" d="m58.89719,46.49263l46,34l-45,34" />
      > </a>
      >
      > <a id="pauseGroup" display="none" onclick="pause()" transform="translate(-3.0)">
      > <rect stroke-dasharray="null" stroke-width="11" stroke="#ff0000" fill="#ff0000" id="pauseout" height="49.65116" width="55" y="57.66705" x="53.39719" />
      > <line fill="none" stroke-dasharray="null" stroke-width="16" stroke="#ffffff" id="pausein" y2="115" x2="80.89719" y1="48" x1="80.89719" />
      > </a>
      >
      > </g>
      > </g>
      > </svg>
      >
      >
      > So, when playGroup is clicked, the sound is played and this in turn triggers the marker to move around the circle. The pauseGroup then appears.
      >
      > If pauseGroup is clicked, the sound and marker both pause: and they start up again, with playGroup visible again.
      >
      > The issue is that when the sound has finished playing, playGroup needs to be visible and the sound and animation need to be reset to the start. Is this achievable?
      >
    • coreymwamba
      ... Hello Francis, I m not entirely sure, but I thought sound.begin would link to the element with an id of sound ... I ll change it though and report back!
      Message 2 of 8 , Mar 4, 2010
        --- In svg-developers@yahoogroups.com, "Francis Hemsher" <fhemsher@...> wrote:
        >
        > Hi Corey,
        > I don't do animations, but just with a cursory look at your code, one item could be contributing to the problem:
        > <animateTransform attributeName="transform" xml:id="bar" begin="sound.begin" ../>
        >
        > should 'sound', instead be 'audioFile' ?
        >
        > Francis
        >


        Hello Francis,

        I'm not entirely sure, but I thought "sound.begin" would link to the element with an id of "sound"... I'll change it though and report back! Thanks.

        For what it's worth, in its current state the button does play the sound and the marker moves for the right amount of time...
      • Erik Dahlstrom
        On Fri, 05 Mar 2010 02:11:22 +0100, Francis Hemsher ... No, it s correct like it is, sound is the id of the element. /Erik --
        Message 3 of 8 , Mar 5, 2010
          On Fri, 05 Mar 2010 02:11:22 +0100, Francis Hemsher <fhemsher@...>
          wrote:

          > Hi Corey,
          > I don't do animations, but just with a cursory look at your code, one
          > item could be contributing to the problem:
          > <animateTransform attributeName="transform" xml:id="bar"
          > begin="sound.begin" ../>
          >
          > should 'sound', instead be 'audioFile' ?

          No, it's correct like it is, 'sound' is the id of the <audio> element.

          /Erik

          --
          Erik Dahlstrom, Core Technology Developer, Opera Software
          Co-Chair, W3C SVG Working Group
          Personal blog: http://my.opera.com/macdev_ed
        • Erik Dahlstrom
          On Thu, 04 Mar 2010 06:42:16 +0100, coreymwamba wrote: ... It s quite easy to detect that the sound finished playing, e.g add
          Message 4 of 8 , Mar 5, 2010
            On Thu, 04 Mar 2010 06:42:16 +0100, coreymwamba <coreymwamba@...>
            wrote:

            ...
            > So, when playGroup is clicked, the sound is played and this in turn
            > triggers the marker to move around the circle. The pauseGroup then
            > appears.
            >
            > If pauseGroup is clicked, the sound and marker both pause: and they
            > start up again, with playGroup visible again.
            >
            > The issue is that when the sound has finished playing, playGroup needs
            > to be visible and the sound and animation need to be reset to the start.
            > Is this achievable?

            It's quite easy to detect that the sound finished playing, e.g add
            onend="playingStopped()" on the <audio> element.

            However I think you might want to consider using the audio element from
            HTML5 for maximum compatibility, either just in script or by having it in
            the markup and triggering actions based on callbacks from the animation
            elements.

            Cheers
            /Erik

            --
            Erik Dahlstrom, Core Technology Developer, Opera Software
            Co-Chair, W3C SVG Working Group
            Personal blog: http://my.opera.com/macdev_ed
          • coreymwamba
            ... Hello, I guess that s the problem - it might sound easy but I don t know how to do it! :) I m guessing that if calling onend= playingStopped() calls a
            Message 5 of 8 , Mar 5, 2010
              --- In svg-developers@yahoogroups.com, "Erik Dahlstrom" <ed@...> wrote:
              >
              > It's quite easy to detect that the sound finished playing, e.g add
              > onend="playingStopped()" on the <audio> element.

              Hello,

              I guess that's the problem - it might sound easy but I don't know how to do it! :)

              I'm guessing that if calling onend="playingStopped()" calls a function called playingStopped() - but what does that look like? Do I use


              function playingStopped() {
              countBar.endElement();
              audioFile.endElement();
              }

              ? And if I pause the sound, does this not effectively end it as well?

              I'm not a hard-core developer, so sorry if it sounds stupid... I really appreciate the advice!

              > However I think you might want to consider using the audio element from
              > HTML5 for maximum compatibility, either just in script or by having it in
              > the markup and triggering actions based on callbacks from the animation
              > elements.


              Maximum compatibility? I thought SVG had wider current support. Is that a wrong assumption?

              Thanks,

              C.
            • coreymwamba
              Hello again, I ve made a SMALL amount of progress. I added a reset() function: function reset() { SVGRoot.setCurrentTime(0); audioFile.setAttributeNS(null,
              Message 6 of 8 , Mar 6, 2010
                Hello again,

                I've made a SMALL amount of progress. I added a "reset()" function:

                function reset()
                {
                SVGRoot.setCurrentTime(0);
                audioFile.setAttributeNS(null, "begin", "play.click");
                countBar.setAttributeNS(null, "begin", "sound.begin");
                playButton.setAttributeNS(null, "display", "inline");
                pauseButton.setAttributeNS(null, "display", "none");
                SVGRoot.pauseAnimations();
                };

                This function is then called on the <audio> element:

                <audio [...all the other attributes...] onend="reset()" />

                But although this resets the play/pause button, when the play button is clicked again the sounds starts from where it left off and not from the beginning... any ideas?

                Thanks for getting me this far though!
              Your message has been successfully submitted and would be delivered to recipients shortly.