如何暂停页面上所有正在播放的音频

Posted 2023-02-25

【中文标题】如何暂停页面上所有正在播放的音频

【英文标题】：how to pause all playing audios on a page

【发布时间】：2015-07-31 13:28:48

【问题描述】：

我有一个像这样工作的 html5 播放器：

HTML：

<div class="player row" data-dwplayer="true" data-mp3="example.mp3" data-loop="true">

javascript：

$("[data-dwplayer=true]").each(function()
    var player = $(this);
    var audio = new Audio();

    /* data */
    var source = player.data('mp3') ? player.data('mp3') : player.data('ogg');
    var auto   = player.data('autoplay') ? true : false;
    var loop   = player.data('loop') ? true : false;

    /* set source */
    audio.src = source;

and the rest of code ... 

意思是所有音频播放器都是用javascript制作的，页面上没有实际的<audio>标签，我想做的是，我需要编写一个函数，当有人点击音频播放器的播放按钮时，所有其他音频播放器都应该暂停，我已经尝试过这段代码，但它不起作用我认为这是因为没有实际的<audio> 标签

/* stop other audio players */
$("audio").not(audio).each(function() 
    if( this.readyState != 0 ) 
        this.pause();
        this.currentTime = 0;
    
);

/* play current audio player */
if( audio.paused && audio.readyState != 0 )
    audio.play();

我该怎么办

【问题讨论】：

你是对的，$("audio") 不应该做任何事情，因为文档中没有实际的 audio 标记（除非你将它附加到“和其余代码......”部分第一个代码sn-p)。您如何跟踪不同的音频？你从哪里得到最后一个代码 sn-p 中的audio 变量？

从上面的代码中：var audio = new Audio();，我的意思是每件事都发生在$("[data-dwplayer=true]").each(function()..

你能创建一个你目前所拥有的 jsfiddle 吗？我想看看什么是/不工作。谢谢。

jsfiddle.net/mec12jz7/14 你去，点击那些小小的白色播放按钮

【参考方案1】：

一种简单但可能并不理想的方法是使用全局变量，即拥有一个数组变量来保存其中的所有音频：

var audios = new Array();

$("[data-dwplayer=true]").each(function()
    var player = $(this);
    var audio = new Audio();

    ...

    audios.push(audio);

    ...

现在，当您单击播放按钮时，您可以遍历音频数组，暂停所有音频，但您单击的音频除外：

// check all the audios
$.each(audios, function(idx, obj) 

    // if it's the audio from the play button
    if (obj == audio) 

        // your code here to play

    // it it's a different audio
     else 

        // your code here (using obj instead of this) to pause the other audios
        if( obj.readyState != 0 ) 
            obj.pause();
            obj.currentTime = 0;
        
    

);

---

在您将代码发布到 JSFiddle 后，我将解决方案添加到您的 JSFiddle 中，它运行良好。你可以在这里看到它：http://jsfiddle.net/mec12jz7/16/

我复制了这里的代码（我的更改标有注释：// AM Change）：

/**
 * Html 5 Audio Player
 * Simple audio player for LearnFiles by iVahid.com
 *
 * @author Am!n - <[e-mail]>
 * @package Wordpress
 * @subpackage Learnfiles Wordpress Theme
 * @version 2.0
*/

// AM Change
var audios = new Array();

$("[data-dwplayer=true]").each(function()
  var player = $(this);
  var audio = new Audio();
  audio.preload = 'metadata';

  /* data */
  var source = player.data('mp3') ? player.data('mp3') : player.data('ogg');
  var auto   = player.data('autoplay') ? true : false;
  var loop   = player.data('loop') ? true : false;

  /* time progress */
  var time_progress = player.find(".time-total");

  /* buttons */
  var volumeButton = player.find(".volume");
  var pauseButton  = player.find(".pause");
  var playButton   = player.find(".play");
  var playToggle 	 = true;

  /* set source */
  audio.src = source;

  // AM Change
  audios.push(audio);

  /**
	 * Format Seconds into DD:HH:MM:SS
	*/
  function formatSeconds( s ) 
    var fm = [
      Math.floor(s / 60 / 60 / 24), // DAYS
      Math.floor(s / 60 / 60) % 24, // HOURS
      Math.floor(s / 60) % 60, // MINUTES
      Math.floor(s % 60) // SECONDS
    ];
    fm = $.map(fm, function(v, i)  return ((v < 10) ? '0' : '') + v; );

    return fm;
  

  /* format into MM:SS */
  function formatAudioTime( s ) 
    var time = formatSeconds( s );
    return time[2]+":"+time[3];
  

  /* main stuff */
  audio.addEventListener("canplaythrough", function () 
    /* autoplay */
    if( auto ) 
      audio.play();
      playButton.removeClass("play").addClass("pause");
    

    /**
		 * Volume Handle
		*/
    volumeButton.click(function() 
      if( $(this).hasClass("volume-3") ) 
        audio.muted = true;
        $(this).removeClass("volume-3")
        $(this).addClass("volume-0")
      

      else if( $(this).hasClass("volume-0") ) 
        audio.muted = false;
        audio.volume = 0.33;
        $(this).removeClass("volume-0")
        $(this).addClass("volume-1")
      

      else if( $(this).hasClass("volume-1") ) 
        audio.muted = false;
        audio.volume = 0.66;
        $(this).removeClass("volume-1")
        $(this).addClass("volume-2")
      

      else if( $(this).hasClass("volume-2") ) 
        audio.muted = false;
        audio.volume = 1;
        $(this).removeClass("volume-2")
        $(this).addClass("volume-3")
      
    );
  , false);

  /**
	 * Show audio duration if it's a playable audio.
	*/
  $(audio).on("canplay",function() 
    //if( !isNaN( this.duration ) && this.duration > 0 )
    //	player.find(".time-total").html( formatAudioTime( this.duration ) );
  );

  /**
	 * Update passed time and progress bar while audio is being played
	*/
  $(audio).on("timeupdate",function() 
    var current = this.currentTime;
    var total = this.duration;
    var bar_width = ( current / total ) * 100;

    player.find(".player-progressbar .bar").css("cursor","pointer");
    player.find(".time-passed").html( formatAudioTime( current ) );
    player.find(".player-progressbar .bar .fluid").css("width",bar_width+"%");
  );

  /**
	 * Update play time position via progressbar
	*/
  player.find(".player-progressbar .bar").click(function(e) 
    if( !audio.paused ) 
      var offset = $(this).offset();
      var pr_width = e.pageX - offset.left;
      var bar_width = $(this).outerWidth();
      var escaled_time = ( audio.duration * pr_width ) / bar_width;

      audio.currentTime = escaled_time;
    
  );

  /**
	 * Pause Handler
	*/
  pauseButton.click(function() 
    audio.pause();
  );

  /**
	 * Play Handler
	*/
  playButton.click(function() 
    /* pause any other audio playing on the current page */		
    // AM Change
    $.each(audios, function(idx, obj) 
      if(obj != audio) 
        // change the play/pause icon using the nth-of-type selector
        $(".player:nth-of-type(" +(idx+1)+ ")").find(".play-pause").removeClass("pause");
        obj.pause();
        obj.currentTime = 0;
      
    );

    /* play/pause */
    if( audio.paused && audio.readyState != 0 ) 
      audio.play();
      $(this).removeClass("play").addClass("pause");
     else 
      /* pause */
      if( playToggle && !audio.paused ) 
        audio.pause();
        $(this).removeClass("pause").addClass("play");
      
    
  );

  /**
	 * Finished
	*/
  $(audio).on("ended",function() 
    audio.currentTime = 0;
    playButton.removeClass("pause");

    if( loop ) 
      audio.play();
      playButton.removeClass("play").addClass('pause');
    
  );
);

.body 
  direction:ltr !important;
  text-align:left;


.col 
  float:left !important;


.player 
  float:left !important;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link type="text/css" href="http://learnfiles.com/wp-content/themes/learnfile/include/css/style.css" rel="stylesheet" />
<div class="player row" data-dwplayer="true" data-mp3="http://dornaweb.ir/love-club.mp3" data-loop="true">
  <div class="player-elements row">
    <span class="col time ltr">
      <strong class="time-passed">00:00</strong> / 
      <span class="time-total">03:23</span>
    </span>

    <span class="volume volume-3 volume-icon col"></span>

    <div class="player-progressbar col ltr">
      <span class="bar row"><em class="fluid go-left" style="width:0%;"></em></span>
    </div>
    <!-- .player-progressbar -->

    <span class="play play-pause col"></span>
  </div>
  <!-- .player-elements -->
</div>

<div class="player row" data-dwplayer="true" data-mp3="http://dornaweb.ir/love-club.mp3" data-loop="true">
  <div class="player-elements row">
    <span class="col time ltr">
      <strong class="time-passed">00:00</strong> / 
      <span class="time-total">03:23</span>
    </span>

    <span class="volume volume-3 volume-icon col"></span>

    <div class="player-progressbar col ltr">
      <span class="bar row"><em class="fluid go-left" style="width:0%;"></em></span>
    </div>
    <!-- .player-progressbar -->

    <span class="play play-pause col"></span>
  </div>
  <!-- .player-elements -->
</div>

【讨论】：

遗憾的是它不起作用:(，这是一个小提琴：jsfiddle.net/mec12jz7/15，检查line 136 javascript

对不起，我能再问你一个问题吗，我知道这不是这个地方，但我会感谢你的帮助，我想打印音频的持续时间，但是当我使用 audio.duration 或 @ 时987654332@ 它返回 NaN ，它实际上适用于某些音频但通常它返回 NaN ，这是控制台错误：Value being assigned to HTMLMediaElement.currentTime is not a finite floating-point value.

JSFiddle 是什么？

jsfiddle.net/mec12jz7/17 ，它说：00:00 / NaN:NaN 在时间部分

我在时间部分看到 00:00 / 03:23