SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: Fading in sound

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    sweden
    Posts
    646
    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,410
    Mentioned
    81 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
    646
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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
    646
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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
    646
    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
  •