Question

我正在尝试启动和停止声音，当单击一个按钮时，该类会更改.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>

Answer 1

这是代码

$(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/

使用Javascript / Jquery停止html声音

1 个答案: