Ausblenden eines Mp3-Songs mit Javascript

Question

Ich versuche, eine HTML-Datei mit einigen Javascript-Embedded erstellen, die es mir ermöglicht, einen Knopf zu drücken und beginnen, aus einem Lied auszublenden. Ich habe es geschafft, damit es den Song spielt (was ein Anfang ist). aber ich habe mit einer zweiten funktion herum gespielt, um es zu versuchen, die Lautstärke zu verringern und eine Verzögerung auf dieser Funktion einzustellen, kann jemand bitte helfen?!

<audio id="myAudio" 
<source src="1.mp3" 
     type='audio/mp4'> 
</audio> 
<button type="button" onclick="aud_play()">Play</button> 
<button type="button" onclick="aud_fade()">Fade</button> 

<script> 
var vol = myAudio.volume; 
var timer; 
function aud_play() { 
    var myAudio = document.getElementById("myAudio"); 
    myAudio.play(); 

} 

function aud_fade(){ 
var myAudio = document.getElementById("myAudio"); 
if (vol > 0) { 
    vol = vol - 0.2 ; 
} 
timer = setTimeout(aud_fade,2); 
} 
</script> 

Answer 1

Ein paar Dinge scheinen Adressierung zu müssen;)

First off, in dem Beispiel, das Sie zur Verfügung gestellt, haben Sie den Audio-Tag nicht geschlossen.

Zweitens, Sie legen nur eine globale Vol-Var und nicht die Lautstärke des Audio-Objekts selbst.

Was Sie versuchen könnten, die Dinge zu halten scoped auf die Funktion und verwenden Sie die aktuellen Audio-Objektvolumen eher als ein ‚global‘ vol var:

<script> 
    function aud_play() { 
     var myAudio = document.getElementById("myAudio"); 
     myAudio.play(); 
    } 

    function aud_fade(){ 
     var timer, 
      myAudio = document.getElementById("myAudio"); 
     if (myAudio.volume > 0) { 
      myAudio.volume -= 0.005; 
      timer = setTimeout(aud_fade,5); 
     } 
    } 
</script> 

<audio id="myAudio"> 
    <source src="1.mp3" type='audio/mp4'> 
</audio> 
<button type="button" onclick="aud_play()">Play</button> 
<button type="button" onclick="aud_fade()">Fade</button> 

Ich habe auch das Timeout und die Volumenmenge eingestellt zu verringern , da die Lautstärke von 0 bis 1 ist. Eine Reduzierung um 0,2 (20 Prozent) alle 2 000 Sekunden würde in 0,1 Sekunden "ausgeblendet" werden!

Hier ist das oben in einer Fiddle.

Möglicherweise möchten Sie das Zurücksetzen des Audiocurrent und Volumen berücksichtigen, wenn die Fade beendet oder wenn Sie die Wiedergabe erneut auf (Hinweis: Es gibt keine Stop-Methode, so pausieren und current kann das Gleiche erreichen):

<script> 

    var fadeTimer = false; 

    var aud_play = function() { 
     clearTimeout(fadeTimer); 
     var myAudio = document.getElementById("myAudio"); 
     myAudio.volume = 1; 
     myAudio.currentTime = 0; 
     myAudio.play(); 
    } 

    var aud_fade = function() { 
     var myAudio = document.getElementById("myAudio"); 
     if (myAudio.volume > 0.005) { 
      myAudio.volume -= 0.005; 
      fadeTimer = setTimeout(aud_fade,5); 
     } else { 
      myAudio.volume = 0; 
      myAudio.pause(); 
      myAudio.currentTime = 0; 
     } 
    } 
</script> 

<audio id="myAudio"> 
    <source src="1.mp3" type='audio/mp4'> 
</audio> 
<button type="button" onclick="aud_play()">Play</button> 
<button type="button" onclick="aud_fade()">Fade</button> 

Hier ist das obige Beispiel in einem anderen Fiddle.

Hoffe, das hilft!

EDIT:

In Bezug auf Aufblenden, man konnte die ‚aud_fade‘ Methode replizieren aber Lautstärke erhöhen, wenn weniger als 1 und nicht abnehmen, wenn mehr als 0, als die Fade-in-Verfahren auf der Start-Methode aufrufen:

var aud_play = function() { 
    clearTimeout(fadeTimer); 
    var myAudio = document.getElementById("myAudio"); 
    myAudio.volume = 0; // 0 not 1, so we can fade in 
    myAudio.currentTime = 0; // set mp3 play positon to the begining 
    myAudio.play(); // start mp3 
    aud_fade_in(); // call fade in method 
}; 

var aud_fade_in = function() { 
    clearTimeout(fadeTimer); 
    var myAudio = document.getElementById("myAudio"); 
    if (myAudio.volume < 9.995) { 
     myAudio.volume += 0.005; 
     fadeTimer = setTimeout(aud_fade_in,10); 
    } else { 
     myAudio.volume = 1; 
    } 
}; 

var aud_fade_out = function() { 
    clearTimeout(fadeTimer); 
    var myAudio = document.getElementById("myAudio"); 
    if (myAudio.volume > 0.005) { 
     myAudio.volume -= 0.005; 
     fadeTimer = setTimeout(aud_fade_out,5); 
    } else { 
     myAudio.volume = 0; 
     myAudio.pause(); 
     myAudio.currentTime = 0; 
    } 
}; 

Hier ist das oben in einer Fiddle.

Answer 2

versuchen Sie dies:

function aud_fade() { 
    var myAudio = document.getElementById("myAudio"); 
    if (myAudio.volume > 0) { 
     myAudio.volume -= .2; 
     timer = setTimeout(aud_fade, 200); 
    } 
}