使用 Javascript/Jquery 停止 html 声音

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

我只是想出了如何在不为每个声音元素添加新类和 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>

Answer 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/