Spielen Sie eine Audiodatei mit jQuery ab, wenn Sie auf eine Schaltfläche klicken

91

Ich versuche, eine Audiodatei abzuspielen, wenn ich auf die Schaltfläche klicke, aber es funktioniert nicht. Mein HTML-Code lautet:

<html>    
    <body>
        <div id="container">
            <button id="play">
                Play Music
            </button>
        </div>
    </body>
</html>

Mein JavaScript ist:

$('document').ready(function () {
    $('#play').click(function () {
        var audio = {};
        audio["walk"] = new Audio();
        audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3"
        audio["walk"].addEventListener('load', function () {
            audio["walk"].play();
        });
    });
});

Auch dafür habe ich eine Geige erstellt .

javascript jquery html Suresh Pattu
quelle
Haben Sie Audio von HTML5
OnesimusUnbound

Antworten:

143

Welcher Ansatz?

Sie können Audio mit <audio>Tag oder <object>oder abspielen <embed>. Lazy Loading (Laden, wenn Sie es brauchen) Der Sound ist der beste Ansatz, wenn seine Größe klein ist. Sie können das Audioelement dynamisch erstellen. Wenn es geladen ist, können Sie es starten .play()und anhalten .pause().

Dinge, die wir benutzt haben

Wir werden canplayevent verwenden, um festzustellen, dass unsere Datei zur Wiedergabe bereit ist.

Es gibt keine .stop()Funktion für Audioelemente. Wir können sie nur anhalten. Und wenn wir am Anfang der Audiodatei beginnen möchten, ändern wir ihre .currentTime. Wir werden diese Zeile in unserem Beispiel verwenden audioElement.currentTime = 0;. Um die .stop()Funktion zu erreichen , halten wir zuerst die Datei an und setzen dann ihre Zeit zurück.

Möglicherweise möchten wir die Länge der Audiodatei und die aktuelle Wiedergabezeit kennen. Wir haben bereits .currentTimeoben gelernt , um die Länge zu lernen, die wir verwenden .duration.

Beispielanleitung

  1. Wenn das Dokument fertig ist, haben wir dynamisch ein Audioelement erstellt
  2. Wir stellen die Quelle mit dem Audio ein, das wir abspielen möchten.
  3. Wir haben das Ereignis 'beendet' verwendet, um die Datei erneut zu starten.

Wenn die aktuelle Zeit gleich ihrer Dauer ist, wird die Audiodatei nicht mehr abgespielt. Wann immer Sie verwenden play(), wird es von vorne beginnen.

  1. Wir haben timeupdateevent verwendet, um die aktuelle Uhrzeit zu aktualisieren, wenn sich das Audio .currentTimeändert.
  2. Wir haben canplayevent verwendet, um Informationen zu aktualisieren, wenn die Datei zur Wiedergabe bereit ist.
  3. Wir haben Schaltflächen zum Abspielen, Anhalten und Neustarten erstellt. 

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3');
    
    audioElement.addEventListener('ended', function() {
        this.play();
    }, false);
    
    audioElement.addEventListener("canplay",function(){
        $("#length").text("Duration:" + audioElement.duration + " seconds");
        $("#source").text("Source:" + audioElement.src);
        $("#status").text("Status: Ready to play").css("color","green");
    });
    
    audioElement.addEventListener("timeupdate",function(){
        $("#currentTime").text("Current second:" + audioElement.currentTime);
    });
    
    $('#play').click(function() {
        audioElement.play();
        $("#status").text("Status: Playing");
    });
    
    $('#pause').click(function() {
        audioElement.pause();
        $("#status").text("Status: Paused");
    });
    
    $('#restart').click(function() {
        audioElement.currentTime = 0;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Sound Information</h2>
    <div id="length">Duration:</div>
    <div id="source">Source:</div>
    <div id="status" style="color:red;">Status: Loading</div>
    <hr>
    <h2>Control Buttons</h2>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="restart">Restart</button>
    <hr>
    <h2>Playing Information</h2>
    <div id="currentTime">0</div>
</body>
Erweitern Sie das Snippet

Ahmet Can Güven
quelle
1
Und Sie müssen dieses Skript am Ende von <body> *
tbleckert
Hier ist ein Markup, das meistens in allen Browsern funktioniert .
Shaijut
Sehr schön, obwohl das OP ausdrücklich sagte, dass er dies in jQuery tun wollte. In Ihrem Beispiel verwenden Sie reines Javascript für Dom-Manipulationen und Ereignis-Listener.
Jacques
Ich habe ein Problem mit diesem Snippet: Wie kann ich das Audio automatisch stoppen, wenn MP3 beendet ist? Jetzt, mit meinem sehr kurzen Audio, klingt dies weiterhin in einer Schleife
Domenico Monaco
1
@DomenicoMonaco Entfernen Sie einfach das endedEreignis, bei dem das Audio von Anfang an abgespielt wird .
Ahmet Can Güven
45 
$("#myAudioElement")[0].play();

Es funktioniert nicht so, $("#myAudioElement").play()wie Sie es erwarten würden. Der offizielle Grund ist, dass durch die Einbindung in jQuery play()jedem einzelnen Element eine Methode hinzugefügt wird , die unnötigen Overhead verursachen würde. Stattdessen müssen Sie sich auf die Position im Array der DOM-Elemente beziehen, mit denen Sie abrufen $("#myAudioElement"), auch bekannt als 0.

Dieses Zitat stammt von einem Fehler, der darüber eingereicht wurde und als "feature / wontfix" geschlossen wurde:

Dazu müssten wir für jeden DOM-Elementmethodennamen einen jQuery-Methodennamen hinzufügen. Und natürlich würde diese Methode nichts für nicht-mediale Elemente tun, so dass es nicht so aussieht, als wäre sie die zusätzlichen Bytes wert, die sie benötigen würde.

felwithe
quelle
3
Danke dir! Genau das, wonach ich gesucht habe!
utdrmac
21

Für alle anderen, die mitmachen, habe ich einfach Ahmets Antwort genommen und die jsfiddle des ursprünglichen Fragestellers hier aktualisiert und ersetzt:

audio.mp3

zum

http://www.uscis.gov/files/nativedocuments/Track%2093.mp3

Verlinken in einem frei verfügbaren MP3 aus dem Internet. Vielen Dank, dass Sie die einfache Lösung geteilt haben!

Texas-Bronius
quelle
Funktioniert auf Firefox 42 unter Ubuntu
Bojan Kogoj
Das Ladeereignis wird in dieser jsfiiddle in Chrome nicht ausgelöst. Es wird nur aufgrund des Autoplay-Attributs abgespielt.
Tom
12

Ich habe hier eine schöne und vielseitige Lösung mit einem Fallback:

<script type="text/javascript">
    var audiotypes={
        "mp3": "audio/mpeg",
        "mp4": "audio/mp4",
        "ogg": "audio/ogg",
        "wav": "audio/wav"
    }

    function ss_soundbits(sound){
        var audio_element = document.createElement('audio')
        if (audio_element.canPlayType){
            for (var i=0; i<arguments.length; i++){
                var source_element = document.createElement('source')
                source_element.setAttribute('src', arguments[i])
                if (arguments[i].match(/\.(\w+)$/i))
                    source_element.setAttribute('type', audiotypes[RegExp.$1])
                audio_element.appendChild(source_element)
            }
            audio_element.load()
            audio_element.playclip=function(){
                audio_element.pause()
                audio_element.currentTime=0
                audio_element.play()
            }
            return audio_element
        }
    }
</script>

Danach können Sie so viele Audiodaten initialisieren, wie Sie möchten:

<script type="text/javascript" >
    var clicksound  = ss_soundbits('your/path/to/click.ogg', "your/path/to/click.mp3");
    var plopsound  = ss_soundbits('your/path/to/plopp.ogg', "your/path/to/plopp.mp3");
</script>

Jetzt können Sie das initialisierte Audioelement mit einfachen Ereignisaufrufen wie überall erreichen, wo immer Sie möchten

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"
André R. Kohl
quelle
4

JSFiddle-Demonstration

Folgendes verwende ich mit JQuery:

$('.button').on('click', function () { 
    var obj = document.createElement("audio");
        obj.src = "linktoyourfile.wav"; 
        obj.play(); 
});
Jeff
quelle
4

Wie wäre es mit:

$('#play').click(function() {
  const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3");
  audio.play();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Erweitern Sie das Snippet

Luis David
quelle
Das ist der einfachste Weg, funktioniert wie ein Zauber und Sie können dieselbe Aktion mit Vanilla Js-Ereignissen auslösen, wenn Sie möchten.
Andrea Mauro