it-swarm.com.de

html5 audio player - jquery umschalten klicken, play/pause?

ich frage mich, was ich falsch mache.

    $('.player_audio').click(function() {
    if ($('.player_audio').paused == false) {
        $('.player_audio').pause();
        alert('music paused');
    } else {
        $('.player_audio').play();
        alert('music playing');
    }
});

ich kann die Audiospur nicht starten, wenn ich den "player_audio" -Tag drücke.

<div class='thumb audio'><audio class='player_audio' src='$path/$value'></audio></div>

hast du eine Ahnung, was ich falsch mache oder was ich tun muss, damit es funktioniert?

49
matt

Nun, ich bin nicht 100% sicher, aber ich glaube nicht, dass jQuery diese Funktionen und Attribute erweitert/analysiert (.paused, .pause(), .play()).

versuchen Sie, auf diejenigen über das DOM-Element zuzugreifen, z.

$('.player_audio').click(function() {
  if (this.paused == false) {
      this.pause();
      alert('music paused');
  } else {
      this.play();
      alert('music playing');
  }
});
68
jAndy

Sie können native Methoden über den Trigger in jQuery aufrufen. Mach einfach das:

$('.play').trigger("play");

Und das gleiche für die Pause: $('.play').trigger("pause");

BEARBEITEN: Wie F ... in den Kommentaren darauf hingewiesen hat, können Sie ähnlich wie die Zugriffseigenschaften vorgehen: $('.play').prop("paused");

94
Thash

Ich bin nicht sicher warum, aber ich musste die alte Skool document.getElementById () verwenden.

<audio id="player" src="http://audio.micronemez.com:8000/micronemez-radio.ogg"> </audio>
<a id="button" title="button">play sound</a>

und die JS:

$(document).ready(function() {
  var playing = false;

  $('a#button').click(function() {
      $(this).toggleClass("down");

      if (playing == false) {
          document.getElementById('player').play();
          playing = true;
          $(this).text("stop sound");

      } else {
        document.getElementById('player').pause();
        playing = false;
        $(this).text("restart sound");
      }

  });
});

Schauen Sie sich ein Beispiel an: http://jsfiddle.net/HY9ns/1/

17
edwardsharp

Dieser Thread war ziemlich hilfreich. Dem jQuery-Selektor muss mitgeteilt werden, für welches der ausgewählten Elemente der folgende Code gilt. Am einfachsten ist es, a anzufügen

    [0]

sowie

    $(".test")[0].play();
15
David Sinclair

es könnte Nizza sein, in einer Codezeile umzuschalten:

let video = $('video')[0];
video[video.paused ? 'play' : 'pause']();

2
Roey

Versuchen Sie es mit Javascript. Es arbeitet für mich

Javascript:

var myAudioTag = document.getElementById('player_video');
myAudioTag.play();
2
Muhammad Muneer

Weil Firefox das MP3-Format nicht unterstützt. Damit dies mit Firefox funktioniert, sollten Sie das ogg-Format verwenden.

1
MadBrain

Einfach verwenden 

$('audio').trigger('pause');
1
Deepak swain

Einfach Fügen Sie diesen Code hinzu

        var status = "play"; // Declare global variable

        if (status == 'pause') {
            status='play';                
        } else {
            status = 'pause';     
        }
        $("#audio").trigger(status);    
0
Mantu

Hier ist meine Lösung (wenn Sie ein anderes Element auf der Seite anklicken möchten):

$("#button").click(function() {
        var bool = $("#player").prop("muted");
        $("#player").prop("muted",!bool);
        if (bool) {
            $("#player").prop("currentTime",0);
        }
});
0
Halpo

Wenn Sie es spielen möchten, sollten Sie verwenden 

$("#audio")[0].play();

Wenn Sie es stoppen möchten, sollten Sie verwenden 

$("#audio").stop();

Ich weiß nicht warum, aber es funktioniert!

0
Velade

Der Grund , warum Ihr Versuch nicht geklappt hat, ist, dass Sie einen Klassenselektor verwendet haben, der eine Sammlung von Elementen zurückgibt, kein ein (= ein!) - Element, auf das Sie zugreifen müssen die Eigenschaften und Methoden der Spieler. Damit es funktioniert, gibt es im Wesentlichen drei Möglichkeiten, die erwähnt wurden, aber nur zur Übersicht:

Holen Sie sich das Element - keine Sammlung - von ...

  • Iteration über die Colllection und Abrufen von des Elements mit this (wie in der akzeptierten Antwort).

  • Verwenden Sie einen Id-Selector, falls verfügbar.

  • Abrufen des Elements einer Auflistung durch Abrufen über seine Position in der Auflistung durch Anhängen von [0] an den Selektor, der das erste Element der Auflistung zurückgibt.

0
Ida Ebkes

wenn noch jemand Probleme mit den oben genannten Lösungen hat, bin ich letztendlich nur für die Veranstaltung gegangen:

$("#jquery_audioPlayer").jPlayer({
    ready:function () {
        $(this).jPlayer("setMedia", {
            mp3:"media/song.mp3"
        })
        ...
    pause: function () {
      $('#yoursoundcontrol').click(function () {
            $("#jquery_audioPlayer").jPlayer('play');
      })
    },
    play: function () {
    $('#yoursoundcontrol').click(function () {
            $("#jquery_audioPlayer").jPlayer('pause');
    })}
});

funktioniert bei mir.

0
yogee

Ich habe es in einem jQuery Akkordeon gemacht.

$(function() {
        /*video controls*/
            $("#player_video").click(function() {
              if (this.paused == false) {
                  this.pause();
              }
            });
        /*end video controls*/

        var stop = false;
        $("#accordion h3").click(function(event) {
            if (stop) {
                event.stopImmediatePropagation();
                event.preventDefault();
                stop = false;
            }
            $("#player_video").click();
        });

    });
0
kelly

Hier ist meine Lösung mit jQuery

<script type="text/javascript">
    $('#mtoogle').toggle(
        function () {
            document.getElementById('playTune').pause();
        },
        function () {
            document.getElementById('playTune').play();
        }
    );
</script>

Und die Arbeitsdemo

http://demo.ftutorials.com/html5-audio/

0
webtech