Spiele und Stoppen von Ton mit JS und JQuery

Ich haben einen Weg Sound mit einem einfachen Befehl zu spielen, https://github.com/admsev/jquery-play-sound, aber die Audio-Datei ich spiele ist ca. 2 Minuten lang. Ich brauche eine Möglichkeit, die Audiodaten mit einem Javascript- oder Jquery-Befehl zu stoppen/zu stummschalten. Weiß jemand wie ich das machen könnte? Ich möchte nicht wirklich einen Knopf haben, der den Ton stoppt, außer es ist ein normaler html-Knopf, der andere Dinge außer dem Stoppen des Klangs tun könnte.Spiele und Stoppen von Ton mit JS und JQuery

Quelle

2016-05-15 DangerMouse5

Die jQuery playSound Bibliothek, die Sie nicht Pausieren verknüpft unterstützt. Ich denke, es wäre das Beste, eine andere Bibliothek zu wählen, die das Pausieren unterstützt, so dass Sie diese Funktionalität nicht selbst schreiben müssen.

Ich benutzte die howler.js Bibliothek vor und es funktionierte gut für mich. Hier ist, wie Sie sich howler.js verwenden:

<!-- to load the library on the page --> 
<script src="howler.js">

// to create and play the sound 
var backgroundMusic = new Howl({ 
    urls: ['music.mp3', 'music.ogg'], 
}).play(); 

// to pause the sound 
// (make sure the variable `backgroundMusic` is accessible) 
backgroundMusic.pause(); 

// to stop the sound 
backgroundMusic.stop();

Quelle

2016-05-15 01:11:18

Hätte ich die .play setzen() auf der var oder könnte ich tun backgroundMusic.play()? – DangerMouse5

Ja, Sie tun können, 'var Untermalung = ...' und dann 'backgroundMusic.play()'. Auf diese Weise können Sie auch mit dem Herunterladen der Musik beginnen, bevor der Benutzer auf Play klickt, wenn Sie beim Laden der Seite nicht mit dem Abspielen beginnen. –

Keine jQuery, keine Plugins, nur einen Browser. Dies ist ein Knopf, der einen MP3 spielt und pausiert. Sie hat nicht angegeben, welche zusätzlichen Dinge, die Sie eine einzige Taste tun wollte, so habe ich keine zusätzlichen Funktionen, dass eine einzige einsame Taste hinzufügen. Welche anderen Dinge wolltest du mit diesem einen einzigen Knopf tun?

Btw, wenn Sie wollen, dass das Audio statt Pause zu stoppen:

Es gibt eine Zeile in dem <style> Block, den Sie Kommentar- und eine Linie kommentieren müssen.
Es gibt eine Zeile in dem <script> Block, den Sie Kommentar- benötigen.

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
    .play:before { 
 
     content: '\25b6'; 
 
    } 
 
    .pause:before { 
 
     content: '\275a\275a'; /*Uncomment this line for pause */ 
 
     /* content: '\25a0'; */ /*Uncomment this line for stop */ 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 

 
    <button id="button" class="play"> 
 
    <audio id="audio" src="http://glpjt.s3.amazonaws.com/so/av/pf-righteous.mp3"></audio> 
 
    </button> 
 

 
    <script> 
 
    var audio = document.getElementById('audio'); 
 
    var button = document.getElementById('button'); 
 

 
    button.addEventListener('click', playPause, false); 
 

 
    function playPause() { 
 
     if (!audio.paused) { 
 
     audio.pause(); 
 
     // audio.currentTime = 0; // Uncomment this line for stop 
 
     button.classList.remove('pause'); 
 
     button.classList.add('play'); 
 
     } else { 
 
     audio.play(); 
 
     button.classList.remove('play'); 
 
     button.classList.add('pause'); 
 
     } 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

Quelle

2016-05-15 01:31:59 zer00ne

Es ist gut, Bibliotheken zu vermeiden, wenn Sie sie nicht benötigen. Manchmal sind jedoch Bibliotheken notwendig, um browserspezifische Unterschiede auszugleichen. [Der Unterschied, auf den ich einmal gestoßen bin] (https://github.com/roryokane/vetinari-clock-simulator/commit/c19a2e95c0e444a37ddffeda3f412816529dae20) war, dass man bei Firefox für Android keinen '.play()' Sound nochmal nachspielen kann es hört auf zu spielen. Das Wechseln zu "howler.js" hat das korrigiert - obwohl das Hinzufügen einer Bibliothek natürlich auch meine Seite etwas langsamer geladen hat. Je nachdem, welche Funktionalität Sie benötigen und welche Browser Sie unterstützen, kann eine der beiden Lösungen die beste sein. –

Spiele und Stoppen von Ton mit JS und JQuery

Antwort

Verwandte Themen