Html5 audio player - jquery toggle click play/pause?

Ответ 1

Ну, я не уверен на 100%, но я не думаю, что jQuery расширяет/анализирует эти функции и атрибуты (.paused, .pause(), .play()).

попробуйте обратиться к элементам над элементом DOM, например:

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

Ответ 2

В jQuery вы можете вызвать встроенные методы для запуска триггера. Просто сделайте следующее:

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

И то же самое для паузы: $('.play').trigger("pause");

EDIT: как указано в комментариях F, вы можете сделать что-то похожее на свойства доступа: $('.play').prop("paused");

Ответ 3

Я не уверен, почему, но мне нужно было использовать старый документ skool document.getElementById();

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

и 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");
      }

  });
});

Посмотрите пример: http://jsfiddle.net/HY9ns/1/

Ответ 4

Этот поток был весьма полезен. Селектору jQuery необходимо указать, к какому из выбранных элементов применяется следующий код. Самый простой способ - добавить

    [0]

таких как

    $(".test")[0].play();

Ответ 5

Попробуйте использовать Javascript. Его работа для меня

JavaScript:

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

Ответ 6

может быть удобно переключиться в одной строке кода:

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

Ответ 7

Потому что Firefox не поддерживает формат mp3. Чтобы сделать эту работу с Firefox, вы должны использовать формат ogg.

Ответ 8

Просто используйте

$('audio').trigger('pause');

Ответ 9

Я сделал это внутри аккордеона jQuery.

$(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();
        });

    });

Ответ 10

если у кого-то еще есть проблемы с вышеупомянутыми решениями, я закончил просто для события:

$("#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');
    })}
});

работает для меня.

Ответ 11

Вот мое решение с помощью jQuery

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

И рабочая демонстрация

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

Ответ 12

Причина, по которой ваша попытка не сработала, заключается в том, что вы использовали селектор классов, который возвращает коллекцию элементов, а не элемент (= один!), который вам нужен для доступа к свойствам и методам игроков, Чтобы заставить его работать там в основном три способа, которые были упомянуты, но только для обзора:

Получить элемент - не коллекцию - по...

• Итерация по колличеству и выборка элемента с помощью this (как в принятом ответе).

• Использование id-селектора, если доступно.

• Получение элемента коллекции путем ее извлечения по его позиции в коллекции путем добавления [0] к селектору, который возвращает первый элемент коллекции.

Ответ 13

Вот мое решение (если вы хотите щелкнуть другой элемент на странице):

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

Ответ 14

Если вы хотите воспроизвести его, вы должны использовать

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

Если вы хотите остановить его, вы должны использовать

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

Я не знаю почему, но он работает!

Ответ 15

Просто добавьте этот код

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

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