html5音频播放器 - jquery切换点击播放/暂停?

时间:2010-06-07 08:38:19

标签: jquery audio html5

我想知道我做错了什么?

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

如果我点击“player_audio”标签,我似乎无法启动音轨。

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

任何想法我做错了什么或我必须做些什么来让它运作?

14 个答案:

答案 0 :(得分:68)

好吧,我不是百分百肯定,但我认为jQuery不会扩展/解析这些函数和属性(.paused.pause().play())。

尝试通过DOM元素访问那些,例如:

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

答案 1 :(得分:17)

我不知道为什么,但我需要使用旧的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/

答案 2 :(得分:15)

thread非常有帮助。需要告诉jQuery选择器以下代码适用于哪个选定元素。最简单的方法是附加一个

    [0]

,例如

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

答案 3 :(得分:2)

尝试使用Javascript。它为我工作

使用Javascript:

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

答案 4 :(得分:2)

在一行代码中切换可能很好:

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

答案 5 :(得分:1)

因为Firefox不支持mp3格式。要使其适用于Firefox,您应该使用ogg格式。

答案 6 :(得分:1)

简单使用

AFHTTPSessionManager *manager = [AFHTTPSessionManager manager];
        manager.requestSerializer = [AFHTTPRequestSerializer serializer];

        NSDictionary *parameters = @{
                                     @"user": @"login",

                                     @"password": txtFieldPassword.text,

                                     @"device": @"ios",
                                     @"deviceToken": strToken,


                                     };


        NSLog(@"parameters is ====%@",parameters);
        manager.responseSerializer = [AFJSONResponseSerializer
                                      serializerWithReadingOptions:NSJSONReadingAllowFragments];
        [manager POST:@"yourUrl" parameters:parameters progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id  _Nullable responseObject)

        {

            NSLog(@"success!%@",responseObject);
            [self successfullLogin:responseObject];


        } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error)
        {
            NSLog(@"error: %@", error);


        }];

答案 7 :(得分:0)

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

    });

答案 8 :(得分:0)

如果其他人对上述解决方案有疑问,我最终只是为了这个事件:

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

适合我。

答案 9 :(得分:0)

这是我使用jQuery的解决方案

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

工作演示

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

答案 10 :(得分:0)

原因为什么你的尝试没有成功,你使用了一个类选择器,它返回一个元素集合,而不是一个(= 1 !)元素,您需要访问玩家属性和方法。为了使它工作,基本上有三种方法,这些方法已被提及,但只是为了概述:

获取元素 - 而不是集合 - 通过......

  • 迭代碰撞并使用this获取 元素(如在接受的答案中)。

  • 使用ID选择器(如果有)。

  • 通过将[0]附加到选择器来获取集合的元素,方法是通过它在集合中的位置来获取集合,该选择器返回集合的第一个元素。

答案 11 :(得分:0)

这是我的解决方案(如果您想点击页面上的其他元素):

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

答案 12 :(得分:0)

如果你想玩它,你应该使用

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

如果你想停止它,你应该使用

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

我不知道为什么,但它确实有效!

答案 13 :(得分:0)

简单添加此代码

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

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