Guest
home
beatmaps
rankings
community
store
help
forum
  1. Forums
  2. osu!
  3. Development
  4. Feature Requests

[web] Add fadein and fadeout in music preview. [Fix all bug]

posted
Total Posts
18
This is a feature request. Feature requests can be voted up by supporters.
Current Priority: +4
LI-NA
7 posts
Joined May 2012
Topic Starter
LI-NA
This tiny script will raise the quality of the music preview's sound.

Features
1. Fade in when music start
2. Fade out when the music ends
3. Fade in and out when the music changes
4. Fade out when turning off with the button

Fixed all the bugs!
(except the one that negate the fadein feature when MP3file loads slowly)

The source code got longer because of the bug-fixing :P

You can activate this script by following the next steps. I test in Chrome, Safari. (It just work in webkit rendering engine?!)
1. press F12 (Chrome, IE) Ctrl+Shift+I (Opera) Ctrl+Alt+C (Safari)
2. Click Console(JavaScript Console)
3. Paste the minimized code
4. Play the music.

minimum
SPOILER
var muout,muin,mx,fis,fos,fo;function sleep(numberMillis){var now=new Date();var exitTime=now.getTime()+numberMillis;while(true){now=new Date();if(now.getTime()>exitTime){return false;}}}function fadeout(vol,ts){muout=vol;fos=ts;if(muout>=0){setVolume(muout);muout--;setTimeout("fadeout(muout, fos)",fos);}}function fadeout_nb(vol,ts){muout=vol;while(true){if(muout>=0){setVolume(muout);muout--;sleep(ts);}else{return;}}}function fadein(limt,vol,ts){muin=vol;mx=limt;fis=ts;if(muin<=mx){setVolume(muin);muin++;setTimeout("fadein(mx, muin, fis)",fis);}}function stop(id){if(isPlaying){if(playingid==id){fadeout_nb(45,10);}else{fadeout_nb(45,3);}try{getFlashObject().SetVariable("method:stop","");}catch(e){}clearTimeout(fo);return;}else{try{getFlashObject().SetVariable("method:stop","");}catch(e){}return;}}function play(id,iscallback){if(!iscallback)stop(id);else if(queuedPlay){clearTimeout(queuedPlay);queuedPlay=null;}if(isPlaying&&playingid==id)return false;playingid=id;try{var flash=getFlashObject();flash.SetVariable("method:setUrl",STATIC_DOMAIN+"/mp3/preview/"+id+".mp3");flash.SetVariable("method:play","");flash.SetVariable("enabled","true");}catch(e){}if(!isPlaying)queuedPlay=setTimeout(function(){play(id,true);},500);fadein(45,0,10);fo=setTimeout("fadeout(45, 10)",9100);return true;}

For Developers (Debugging 'console.log')
SPOILER
var muout,
   muin,
   mx,
   fis,
   fos,
   fo;
function sleep(numberMillis) {
   var now = new Date();
   var exitTime = now.getTime() + numberMillis;
   while (true) {
       now = new Date();
       if (now.getTime() > exitTime) {
           return false;
       }
   }
}
function fadeout(vol, ts) {
   muout = vol;
   fos = ts;
   if (muout >= 0) {
       setVolume(muout);
       console.log(muout + "fadeout");
       muout --;
       setTimeout("fadeout(muout, fos)", fos);
   }
}
function fadeout_nb(vol, ts) {
   muout = vol;
   while (true) {
       if (muout >= 0) {
           setVolume(muout);
           console.log(muout + "fadeout nb");
           muout --;
           sleep(ts);
       } else {
           return;
       }
   }
}
function fadein(limt, vol, ts) {
   muin = vol;
   mx = limt;
   fis = ts;
   if (muin <= mx) {
       setVolume(muin);
       console.log(muin + "fadein");
       muin++;
       setTimeout("fadein(mx, muin, fis)", fis);
   }
}
function stop(id) {
   console.log('stop is working');
   if (isPlaying) {
       console.log('stop isPlaying');
       if (playingid == id) {
           fadeout_nb(45, 10);
       } else {
           fadeout_nb(45, 3);
       }
       try {
           getFlashObject().SetVariable("method:stop", "");
           console.log('stop music isPlaying');
       }
       catch(e) {}
       clearTimeout(fo);
       return;
   } else {
       console.log('stop !isPlaying');
       try {
           getFlashObject().SetVariable("method:stop", "");
           console.log('stop music !isPlaying');
       }
       catch(e) {}
       return;
   }
}
function play(id, iscallback) {
   if (!iscallback) stop(id);
   else if (queuedPlay) {
       clearTimeout(queuedPlay);
       queuedPlay = null;
       console.log('rePlay');
   }
   if (isPlaying && playingid == id) return false;
   playingid = id;
   try {
       var flash = getFlashObject();
       flash.SetVariable("method:setUrl", STATIC_DOMAIN + "/mp3/preview/" + id + ".mp3");
       flash.SetVariable("method:play", "");
       flash.SetVariable("enabled", "true");
   }
   catch(e) {}
   if (!isPlaying)
   queuedPlay = setTimeout(function () {
       play(id, true);
   }, 500);
   fadein(45, 0, 10);
   fo = setTimeout("fadeout(45, 10)", 9100); //fade out function start. 9100ms
   return true;
}

Normal
SPOILER
var muout,
   muin,
   mx,
   fis,
   fos,
   fo;
function sleep(numberMillis) {
   var now = new Date();
   var exitTime = now.getTime() + numberMillis;
   while (true) {
       now = new Date();
       if (now.getTime() > exitTime) {
           return false;
       }
   }
}
function fadeout(vol, ts) {
   muout = vol;
   fos = ts;
   if (muout >= 0) {
       setVolume(muout);
       muout --;
       setTimeout("fadeout(muout, fos)", fos);
   }
}
function fadeout_nb(vol, ts) {
   muout = vol;
   while (true) {
       if (muout >= 0) {
           setVolume(muout);
           muout --;
           sleep(ts);
       } else {
           return;
       }
   }
}
function fadein(limt, vol, ts) {
   muin = vol;
   mx = limt;
   fis = ts;
   if (muin <= mx) {
       setVolume(muin);
       muin++;
       setTimeout("fadein(mx, muin, fis)", fis);
   }
}
function stop(id) {
   if (isPlaying) {
       if (playingid == id) {
           fadeout_nb(45, 10);
       } else {
           fadeout_nb(45, 3);
       }
       try {
           getFlashObject().SetVariable("method:stop", "");
       }
       catch(e) {}
       clearTimeout(fo);
       return;
   } else {
       try {
           getFlashObject().SetVariable("method:stop", "");
       }
       catch(e) {}
       return;
   }
}
function play(id, iscallback) {
   if (!iscallback) stop(id);
   else if (queuedPlay) {
       clearTimeout(queuedPlay);
       queuedPlay = null;
   }
   if (isPlaying && playingid == id) return false;
   playingid = id;
   try {
       var flash = getFlashObject();
       flash.SetVariable("method:setUrl", STATIC_DOMAIN + "/mp3/preview/" + id + ".mp3");
       flash.SetVariable("method:play", "");
       flash.SetVariable("enabled", "true");
   }
   catch(e) {}
   if (!isPlaying)
   queuedPlay = setTimeout(function () {
       play(id, true);
   }, 500);
   fadein(45, 0, 10);
   fo = setTimeout("fadeout(45, 10)", 9100); //fade out function start. 9100ms
   return true;
}
Last edited by LI-NA , edited 4 times in total.
jemhuntr
933 posts
Joined February 2012
jemhuntr
is this a feature request? Sounds more like a tutorial to me. xD
Btw, support~

also, I'll try this out tomorrow.
theowest
osu! Alumni
6,891 posts
Joined January 2009
theowest
Good idea.

your code is a big too long there though. You should spoilerbox it or something.
Kuro
836 posts
Joined July 2012
Kuro

JeMhUnTeR wrote:

is this a feature request? Sounds more like a tutorial to me. xD
Btw, support~

also, I'll try this out tomorrow.
lol, doesn't look like one. It looks more like a suggestion, to me.
I believe this is coded in C++ but I'm not too sure, I'm not a big fan of C :P
But I see what the point and the problem is.. :D
jemhuntr
933 posts
Joined February 2012
jemhuntr
i can see this is a javascript code.

...right???
ewaldhew
3 posts
Joined October 2010
ewaldhew
hmm.. this will be an interesting addition I guess..

As for the bug, after messing around with the code a while, it seems that the addition of a single line was sufficient to solve it (I've tried it out, seems to work for me, doesn't have that 'overlapping' thing or whatever you would call it)

SPOILER
var mu;
var mx;
function fadeout(vol) {
    mu=vol;
    if (mu>0) {
    setVolume(mu);
    mu=mu-1;
    setTimeout("fadeout(mu);", 20); //Iteration time 20ms.  you can change it(you have to change function start time too) 1000ms = 1s
    }
}

function fadein(limt, vol) {
    mu = vol;
    mx = limt;
    if (mu<mx) {
    setVolume(mu);
    mu++;
    setTimeout("fadein(mx, mu);", 10); //Iteration time 10ms.
    }
}

function play(id, iscallback) {
    clearTimeout(t); //here is the added line.
    if (!iscallback)
    stop();
    else if (queuedPlay) {
        clearTimeout(queuedPlay);
        queuedPlay = null;
    }
    if (isPlaying && playingid == id) return false;
    playingid = id;
    try {
        var flash = getFlashObject();
        flash.SetVariable("method:setUrl", STATIC_DOMAIN + "/mp3/preview/" + id + ".mp3");
        flash.SetVariable("method:play", "");
        flash.SetVariable("enabled", "true");
    }
    catch(e) {}
    if (!isPlaying)
    queuedPlay = setTimeout(function(){play(id, true)}, 500);
    fadein(45, 0);
    t = setTimeout(function(){fadeout(45)}, 9100);   //fade out function start. 9100ms
    return true;
}

Also, I'm not sure if that shortcut works for all browsers.. at least for me, Firefox's console isn't at F12. Chrome does though (I use Chrome)
[CSGA]Ar3sgice
4,298 posts
Joined July 2011
[CSGA]Ar3sgice
pro code
Kuro
836 posts
Joined July 2012
Kuro

JeMhUnTeR wrote:

i can see this is a javascript code.

...right???
really? I should have paid more attention in programming principles 1411 :P
LI-NA
7 posts
Joined May 2012
Topic Starter
LI-NA

theowest wrote:

Good idea.

your code is a big too long there though. You should spoilerbox it or something.
umm I have to re-write this code....

ewaldhew wrote:

hmm.. this will be an interesting addition I guess..

As for the bug, after messing around with the code a while, it seems that the addition of a single line was sufficient to solve it (I've tried it out, seems to work for me, doesn't have that 'overlapping' thing or whatever you would call it)

SPOILER
var mu;
var mx;
function fadeout(vol) {
    mu=vol;
    if (mu>0) {
    setVolume(mu);
    mu=mu-1;
    setTimeout("fadeout(mu);", 20); //Iteration time 20ms.  you can change it(you have to change function start time too) 1000ms = 1s
    }
}

function fadein(limt, vol) {
    mu = vol;
    mx = limt;
    if (mu<mx) {
    setVolume(mu);
    mu++;
    setTimeout("fadein(mx, mu);", 10); //Iteration time 10ms.
    }
}

function play(id, iscallback) {
    clearTimeout(t); //here is the added line.
    if (!iscallback)
    stop();
    else if (queuedPlay) {
        clearTimeout(queuedPlay);
        queuedPlay = null;
    }
    if (isPlaying && playingid == id) return false;
    playingid = id;
    try {
        var flash = getFlashObject();
        flash.SetVariable("method:setUrl", STATIC_DOMAIN + "/mp3/preview/" + id + ".mp3");
        flash.SetVariable("method:play", "");
        flash.SetVariable("enabled", "true");
    }
    catch(e) {}
    if (!isPlaying)
    queuedPlay = setTimeout(function(){play(id, true)}, 500);
    fadein(45, 0);
    t = setTimeout(function(){fadeout(45)}, 9100);   //fade out function start. 9100ms
    return true;
}

Also, I'm not sure if that shortcut works for all browsers.. at least for me, Firefox's console isn't at F12. Chrome does though (I use Chrome)
Thanks!!! I can find how to fix that bugs!

Yes!! I fix all bugs!
Last edited by theowest , edited 1 time in total.
Archangel Tirael
479 posts
Joined January 2011
Archangel Tirael
Support. It's make osu! better.
Flanster
5,938 posts
Joined August 2010
Flanster
code doesn't do anything here lol.
LI-NA
7 posts
Joined May 2012
Topic Starter
LI-NA

Lolicore Flandre wrote:

code doesn't do anything here lol.
:!: Really? What browser do you use?
I've tested in Chrome.
jemhuntr
933 posts
Joined February 2012
jemhuntr
okay now that the OP was edited, it looks more like a tutorial already xD
Flanster
5,938 posts
Joined August 2010
Flanster

LI-NA wrote:

:!: Really? What browser do you use?
I've tested in Chrome.
Firefox 13.0.1
peppy
19,316 posts
Here since the beginning
peppy
There are still issues with your function. While I appreciate the effort, it would take me less time to implement it myself than checking your code for errors ^^;.
LI-NA
7 posts
Joined May 2012
Topic Starter
LI-NA

Lolicore Flandre wrote:

LI-NA wrote:

:!: Really? What browser do you use?
I've tested in Chrome.
Firefox 13.0.1
Oh! I doesn't work in FF!
I have to re-write this code....
What is error? I can't understanding..

peppy wrote:

There are still issues with your function. While I appreciate the effort, it would take me less time to implement it myself than checking your code for errors ^^;.
:P I have to fix the bugs.....
It can work all browser and fade in feature can work when music load slowly.
Keredna
99 posts
Joined December 2009
Keredna
Works great on my chrome, but might have destroyed my IE a little.
LI-NA
7 posts
Joined May 2012
Topic Starter
LI-NA

Keredna wrote:

Works great on my chrome, but might have destroyed my IE a little.
I think music player doesn't work in IE.....
Maybe isPlaying function can't work. So repeat repaet and repeat.
(IE 9)
Please sign in to reply.

New reply

0
1 / 18