SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: Fading in sound

  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    645
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Fading in sound

    Is there a way to fade in sound that I have in a folder. So, when a user start the mp3 file I want the sound to fade in from 0 to 100 within 3 seconds (or something like that).
    The sound is uploaded and cut, so it only plays a sample of a longer track. That's why the sound starts a little hard sometimes.
    Is it possible to add some kind of fade in to the sound with JavaScript? Or might there be other solutions? I can't use ffmpeg on the hosted server.

  2. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,209
    Mentioned
    74 Post(s)
    Tagged
    3 Thread(s)
    If you are cutting the sample of sound on your PC prior to upload why not add the fade then? MP3 Directcut allows you to select part of a mp3 file and add a fade.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    645
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    No, the complete mp3 file is uploaded. And then when a user is playing the file I cut a part of the file before it's being played.
    So, it's only playing a sample of the track. Would be nice with a quick fade in.

    PHP Code:
    $starter=$_POST['starter'];
    $ending=($_POST['starter']+30);
    $mp3->cut_mp3($thesong$thesample$starter$ending'second'false); 

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    If you are using jQuery you can use .animate() to fade the track in.

    E.g.

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Fade in audio</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <audio id="audio1" src="1.mp3" autoplay="autoplay"></audio>
        
        <script>
          $(document).ready(function(){
            $("#audio1")[0].volume = 0;
            $("#audio1").animate({volume: 1}, 3000);
          });
        </script>
      </body>
    </html>
    Gotta love jQuery

    Reference: http://stackoverflow.com/questions/7...n-and-fade-out

  5. #5
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    645
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I will take a look at that next time I am working on it.
    Is it possible to use this with a flash player as well?

    I know nothing. ;-)

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by brad62 View Post
    Is it possible to use this with a flash player as well?
    That depends on the Flash Player you are using and if it offers an interface to do this sort of thing.

    For example the Flash-based mp3-player has a setVolume method which allows you to alter the volume via JS.

  7. #7
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    645
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's the player I'm using. But the mini one.
    I guess I have to use the js version to make it work? But how do I add that to the player and where do I make the css design to the player.
    I like it very simple and clean. A red player with white buttons. But with a quick fade in (and if possible a fade out as well).

    The documentation was very thins, so I don't really get it from the site. I like when they have examples. Then it's easier to understand what's doing what. At least for me. ;-)

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    You're right, the mini version of the player doesn't offer this functionality.
    I had a look at the JS version of the player and it wasn't too hard to implement a fade in.
    Here's a demo for you.

    I have mostly used the code from the mp3-player demo I linked to previously.
    I added one method to the myListener object, namely fadeIn() which takes a value (in seconds) as its argument and fades the track in over this period of time.

    Have a look at the source code of my demo page and hit me up if you have any questions.

    Also, I have included the CSS in the head of the page, so you can style the player however you want.

    Hope this helps.

    P.S. On my system the sound is slow to load when you open the page for the first time, so you actually miss the effect. I think however that this is a 64bit / Flash issue. If you refresh the page after that everything works as expected.

  9. #9
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    645
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Wow! That's awesome. I will check it out next time I'm working on this.

  10. #10
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    645
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Now I am trying this code and it works fine. Do you think there might be a way to make a fade out as well? Not sure how to calculate the fade out to find out where the end of the file is.

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Quote Originally Posted by brad62 View Post
    Do you think there might be a way to make a fade out as well?
    Sure!

    The listener has a duration property and a position property, both of which return the duration and the position of the track in milliseconds.
    And that's all we need to implement a fade out function.

    I've made you a second demo that implements this.

    By way of explanation:

    In the onInit function set the following properties:

    Code JavaScript:
    this.fadeOut = true;
    this.fadeOutDuration = 5;

    Hopefully these should be self explanatory.

    I also use this.fadeOutDuration to work out when to begin the fade:

    Code JavaScript:
    if ((this.duration - this.position - 3000) < (myListener.fadeOutDuration * 1000) && myListener.fadeOut){
      fadeOut();
      myListener.fadeOut = false;
    }

    In this case I have subtracted three seconds to account for white noise at the end of the song. You probably won't have to do that with your clips.

    Hopefully that gives you something to go on.

    Here's the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!--<link rel="stylesheet" type="text/css" href="http://flash-mp3-player.net/style/style.css" media="screen" />-->
        <title>MP3 Player - Players - JS - Preview</title>
        <!--<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>-->
        <style>
          .player {
            float: left;
            width: 200px;
            margin: 1em;
          }
          
          .playerpreview {
            margin-top: 12px;
            margin-bottom: 12px;
          }
          
          #playercontroller {
            background-color: #e9f6ff;
            color: #000;
            height: 20px;
            width: 200px;
            border: solid 1px #ccc;
            margin: 0 0 1em 0;
          }
          
          #playercontroller .button {
            width: 20px;
            height: 20px;
            background-repeat: no-repeat;
            background-position: 2px 2px;
            float: left;
          }
          
          #playercontroller .button a {
            display: block;
            height: 20px;
            text-indent: -100em;
            overflow: hidden;
            background-image: none;
          }
          
          #playercontroller .timeline {
            position: relative;
          }
          
          #playercontroller .timeline a {
            position: absolute;
            left: 40px;
            display: block;
            height: 20px;
            width: 40px;
            text-indent: -100em;
            overflow: hidden;
            background-image: url(images/control_slider.png);
          }
          
          #playercontroller .timeline a:visited {
            background-image: url(images/control_slider.png);
          }
          
          #playercontroller .timeline a:hover {
            background-image: url(images/control_slider_blue.png);
          }
          
          #playercontroller .play {
            background-image: url(images/control_play.png);
          }
          
          #playercontroller .play:hover {
            background-image: url(images/control_play_blue.png);
          }
          
          #playercontroller .pause {
            background-image: url(images/control_pause.png);
            display: none;
          }
          
          #playercontroller .pause:hover {
            background-image: url(images/control_pause_blue.png);
          }
          
          #playercontroller .stop {
            background-image: url(images/control_stop.png);
          }
          
          #playercontroller .stop:hover {
            background-image: url(images/control_stop_blue.png);
          }
        </style>
      </head>
      
      <body>
        <object class="playerpreview" id="myFlash" type="application/x-shockwave-flash" data="player_mp3_js.swf" width="1" height="1">
          <param name="movie" value="player_mp3_js.swf" />
          <param name="AllowScriptAccess" value="always" />
          <param name="FlashVars" value="listener=myListener&amp;interval=500" />
        </object>
        
        <div id="playercontroller">
          <div id="playerplay" class="button play"><a href="javascript:play()">PLAY</a></div>
          <div id="playerpause" class="button pause"><a href="javascript:pause()">PAUSE</a></div>
          <div id="playerstop" class="button stop"><a href="javascript:stop()">STOP</a></div>
          <div class="timeline"><a id="playerslider" href="#slider">SLIDER</a></div>
        </div>
      
        <script type="text/javascript">
        //<![CDATA[
        var myListener = new Object();
        
        /* Initialisation */
        myListener.onInit = function(){
          this.position = 0;
          play();
          fadeIn(5);
          this.fadeOut = true;
          this.fadeOutDuration = 5;
        };
        
        /* Update */
        myListener.onUpdate = function(){
          
          var isPlaying = (this.isPlaying == "true");
          document.getElementById("playerplay").style.display = (isPlaying)?"none":"block";
          document.getElementById("playerpause").style.display = (isPlaying)?"block":"none";
          
          var timelineWidth = 160;
          var sliderWidth = 40;
          var sliderPositionMin = 40;
          var sliderPositionMax = sliderPositionMin + timelineWidth - sliderWidth;
          var sliderPosition = sliderPositionMin + Math.round((timelineWidth - sliderWidth) * this.position / this.duration);
          
          if (sliderPosition < sliderPositionMin) {
            sliderPosition = sliderPositionMin;
          }
          
          if (sliderPosition > sliderPositionMax) {
            sliderPosition = sliderPositionMax;
          }
          
          document.getElementById("playerslider").style.left = sliderPosition+"px";
          
          // Check for fade out
          if ((this.duration - this.position - 3000) < (myListener.fadeOutDuration * 1000) && myListener.fadeOut){
            fadeOut();
            myListener.fadeOut = false;
          }
        };
        
        function getFlashObject(){
          return document.getElementById("myFlash");
        }
        
        function play(){
          if (myListener.position == 0) {
            getFlashObject().SetVariable("method:setUrl", "test.mp3");
          }
          getFlashObject().SetVariable("method:play", "");
          getFlashObject().SetVariable("enabled", "true");
        }
        
        function pause(){
          getFlashObject().SetVariable("method:pause", "");
        }
        
        function stop(){
          getFlashObject().SetVariable("method:stop", "");
        }
        
        function setPosition(){
          var position = document.getElementById("inputPosition").value;
          getFlashObject().SetVariable("method:setPosition", position);
        }
        
        function setVolume(v){
          getFlashObject().SetVariable("method:setVolume", v);
        }
        
        function fadeIn(t){
          getFlashObject().SetVariable("method:setVolume", 0);
          var inc = (t/100)*1000;
          var v = 0;
          var to = window.setInterval(function(){
              getFlashObject().SetVariable("method:setVolume", v);
              if (v==100){
                clearInterval(to);
                console.log("Finished fading in");
              } else {
                v++;
              }
            }, inc);
        }
        
        function fadeOut(){
          console.log("Starting fading out");
          var inc = (myListener.fadeOutDuration/100)*1000;
          var v = 100;
          var to = window.setInterval(function(){
              getFlashObject().SetVariable("method:setVolume", v);
              if (v==0){
                clearInterval(to);
              } else {
                v--;
              }
            }, inc);
        }
        
        //]]>
        </script>
        <!--[if IE]>
          <script type="text/javascript" event="FSCommand(command,args)" for="myFlash">
            eval(args);
          </script>
        <![endif]-->
      </body>
    </html>

    As a final note: once you've got this set up and working as you like, it might be worth trying to refactor the JavaScript as the fade in and fade out functions share a lot of code. The code would also have been much more concise if I could have figured out how to access the properties of the myListener object from outside of the onInit method, so that might be something to revisit.

    HTH

  12. #12
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    645
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Awesome! Again!
    I will try this out when I'm in front of the right computer (and not at work). Very well explained. I really like that. Then I learn something on the way.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •