停止html声音与Javascript/Jquery

Stop html sound with Javascript/Jquery

本文关键字：Jquery Javascript html 声音 停止      更新时间：2023-09-26

我试图开始和停止一个声音，当一个按钮，哪个类的变化与。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>

我刚刚想出了如何做到这一点，而无需为每个声音元素添加新的类和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>

代码

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

相关文章：