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.
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.
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.
$starter=$_POST['starter'];
$ending=($_POST['starter']+30);
$mp3->cut_mp3($thesong, $thesample, $starter, $ending, 'second', false);
Hi there,
If you are using jQuery you can use .animate() to fade the track in.
E.g.
<!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/7451508/html5-audio-playback-with-fade-in-and-fade-out
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. 
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 [URL=“http://flash-mp3-player.net/players/js/documentation/”]setVolume method which allows you to alter the volume via JS.
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.
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.
Wow! That’s awesome. I will check it out next time I’m working on this.
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.
Hi there,
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:
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:
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:
<!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&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
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.