使用 Javascript/Jquery 停止 html 声音

Posted 2023-02-25

【中文标题】使用 Javascript/Jquery 停止 html 声音

【英文标题】：Stop html sound with Javascript/Jquery

【发布时间】：2015-08-26 14:49:39

【问题描述】：

我正在尝试启动和停止声音，当单击一个按钮时，哪个类随 .toggleClass() 发生变化。当我单击按钮时声音应该开始，当我再次单击它或单击另一个播放另一种声音的按钮时停止。但是，当我再次单击按钮时，声音不会停止，而是从头开始播放。我尝试了几种方法，但似乎没有任何方法适用于我拥有的当前代码。对我来说重要的是，当播放另一个声音时，声音也会停止。这已经奏效了。 我希望你能理解我的意思，我不知道如何更好地解释它。 （对不起，我的英语不好，如果您有任何问题，请联系我）。如果有人可以帮助我，我会很高兴。

这是我停止声音的尝试：

$(document).ready(function () 
    $(".fa-volume-up").click(function () 
        $('audio').each(function () 
            this.pause();
            this.currentTime = 0;
        );
    );
);

这是我的全部代码：

//Icon color change
$(document).ready(function() 
  $(".fa-volume-off,.fa-volume-up").click(function() 
    $(".fa-volume-off").toggleClass("fa-volume-up");
  );
);

//Sound
var currentsound;

function EvalSound(soundobj) 
  if (currentsound) 
    currentsound.pause();
  
  var thissound = document.getElementById(soundobj);
  thissound.currentTime = 0;
  thissound.play();
  currentsound = thissound;


//Stop sound on click 
$(document).ready(function() 
  $(".fa-volume-up").click(function() 
    $('audio').each(function() 
      this.pause();
      this.currentTime = 0;
    );
  );
);

 /*basic document style*/
 body,
 html 
   font-family: 'Open Sans', sans-serif;
   font-size: 18px;
 
 p 
   width: 400px;
   margin: auto;
   margin-top: 50px;
 
 audio 
   display: none;
 
 /*Icon style*/
 .fa-volume-off 
   width: 14px;
 
 .fa-volume-up 
   color: #3ad27a;
 
 .fa-volume-off,
 .fa-volume-up:hover 
   cursor: pointer
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">


<p>
  A wonderful serenity has taken possession of my entire soul, whole heart. Israel (Sparring) - Chance The Rapper
  <i class="fa fa-volume-off" onClick="EvalSound('sound1');StopSound(soundobj)"></i>
  I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.
</p>

<audio class="audio" id="sound1" src="http://soundbible.com//mp3/Coin_Drop-Willem_Hunt-569197907.mp3" controls preload="auto" autobuffer></audio>

【参考方案1】：

我只是想出了如何在不为每个声音元素添加新类和 id 的情况下做到这一点。

这是工作的 js 代码：

$(document).ready(function () 
//change icon and icon color
$(".fa-volume-off,.fa-volume-up").click(function () 
    $(this).toggleClass("fa-volume-up");
    $('.fa-volume-up').not($(this)).removeClass('fa-volume-up');
    //stop audio on second button click
    $(".speaker").click(function () 
        if (!$(this).hasClass("fa-volume-up")) 
            $(".audio").trigger("pause");
        
    );
););

   //stop sound and start different sound
var currentsound;
function EvalSound(soundobj) 
    if (currentsound) 
        currentsound.pause();
    
    var thissound = document.getElementById(soundobj);
    thissound.currentTime = 0;
    thissound.play();
    currentsound = thissound;
;

还有演示：

$(document).ready(function() 
  //change icon and icon color
  $(".fa-volume-off,.fa-volume-up").click(function() 
    $(this).toggleClass("fa-volume-up");
    $('.fa-volume-up').not($(this)).removeClass('fa-volume-up');
    //stop audio on second button click
    $(".speaker").click(function() 
      if (!$(this).hasClass("fa-volume-up")) 
        $(".audio").trigger("pause");
      
    );
  );
);

//stop sound and start second sound
var currentsound;

function EvalSound(soundobj) 
  if (currentsound) 
    currentsound.pause();
  
  var thissound = document.getElementById(soundobj);
  thissound.currentTime = 0;
  thissound.play();
  currentsound = thissound;
;

/*basic document style*/

body,
html 
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;

p 
  width: 400px;
  margin: auto;
  margin-top: 50px;

audio 
  display: none;

/*Icon style*/

.fa-volume-off 
  width: 14px;

.fa-volume-up 
  color: #3ad27a;

.fa-volume-off,
.fa-volume-up:hover 
  cursor: pointer

<link href="https://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

<p>
  A wonderful serenity has taken possession of my entire soul, whole heart. Israel (Sparring) - Chance The Rapper
  <i class="fa fa-volume-off speaker" onClick="EvalSound('sound1');StopSound(soundobj)"></i> I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.
  <i class="fa fa-volume-off speaker" onClick="EvalSound('sound2');StopSound(soundobj);SoundEnded();"></i> A wonderful serenity has taken possession of my entire soul, whole heart.<i class="fa fa-volume-off speaker" onClick="EvalSound('sound3');StopSound(soundobj)"></i>
</p>

<audio class="audio" id="sound1" src="http://soundbible.com//mp3/Coin_Drop-Willem_Hunt-569197907.mp3" controls preload="auto" autobuffer></audio>
<audio class="audio" id="sound2" src="wiz.mp3" controls preload="auto" autobuffer></audio>
<audio class="audio" id="sound3" src="drake.m4a" controls preload="auto" autobuffer></audio>

【参考方案2】：

这里是代码

$(document).ready(function () 
    $(".audio-control").click(function () 
        var audio = $('.audio').get(0);
        if (audio.paused == false) 
            $('.audio-control').removeClass('fa-volume-up').addClass('fa-volume-off');
            audio.pause();
         else 
            $('.audio-control').removeClass('fa-volume-off').addClass('fa-volume-up');
            audio.play();
        
    );
);

这是一个例子 https://jsfiddle.net/5f2cbs0m/2/

【讨论】：

它不起作用，我不知道为什么，但我认为这是因为我将课程从 .fa-volume-up 切换到 .fa-volume-off。我不确定

您只是即插即用吗？您应该将其配置为您的类/ID...无论如何，使用 jsfiddle 示例...

我做了，我把它改成 $('.fa-volume-up').click(function () var audio = $('.audio').get(0); if (audio.paused == false) audio.pause(); else audio.play(); )

感谢您的帮助，它基本上工作了，但我现在无法添加第二、第三或第四个声音。我该如何解决？ jsfiddle.net/2a77aa3q/2

注入标识符，例如不同的类名或id。