正文

使用 Javascript/Jquery 停止 html 声音

 2023-02-25  270

关键词：

【中文标题】使用 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。

如何使用 Javascript/jQuery 确定图像是不是已加载？

】如何使用Javascript/jQuery确定图像是不是已加载？【英文标题】：HowcanIdetermineifanimagehasloaded,usingJavascript/jQuery?如何使用Javascript/jQuery确定图像是否已加载？【发布时间】：2010-09-2018:32:19【问题描述】：我正在编写一些Javascript来调... 查看详情

如何使用 Javascript/jQuery 确定图像是不是已加载？

第二次使用函数导致程序停止

】第二次使用函数导致程序停止【英文标题】：seconduseoffunctioncausetostopprogram【发布时间】：2022-01-0517:07:14【问题描述】：我创建了用于操作驱动1602LCD端口的函数。#include"delay.h"#include<stdint.h>#include"stm32f0xx.h"#ifndefLCD1602A_H_#defi... 查看详情

当python使用“Python.h”调用该c++进程时，如何在python中停止一个c++进程

】当python使用“Python.h”调用该c++进程时，如何在python中停止一个c++进程【英文标题】：Howtostopac++processinpython,whenpythoninvokethatc++processusing"Python.h"【发布时间】：2019-11-1412:34:26【问题描述】：在一个c++程序中，我使用“Pyth... 查看详情

使用/解析模板时停止编译

】使用/解析模板时停止编译【英文标题】：Stopcompilationwhenatemplatehasbeenused/resolved【发布时间】：2017-02-2010:25:50【问题描述】：这个MCVE：#include<stdio.h>#include<time.h>#defineMAX_LENGTH_DATETIME25template<typenameT>char*convertUni 查看详情

使用 jquery/javascript 调用 angularjs 函数

】使用jquery/javascript调用angularjs函数【英文标题】：Callangularjsfunctionusingjquery/javascript【发布时间】：2014-07-0203:25:44【问题描述】：我正在尝试使用javascript/jQuery调用Angular函数，以下是我找到的链接CallAngularFunctionwithJqueryCallcontrolle... 查看详情

Javascript/jquery淡入淡出效果衰减

】Javascript/jquery淡入淡出效果衰减【英文标题】：Javascript/jqueryfadeeffectdecay【发布时间】：2013-02-2013:23:30【问题描述】：这次非常具体，我有以下代码来根据条件循环一些淡入淡出，正如您所看到的，动画根据状态略有不同。目... 查看详情

如何使用 jquery/javascript 将文本插入 json [重复]

】如何使用jquery/javascript将文本插入json[重复]【英文标题】：howtoinserttextintojsonusingjquery/javascript[duplicate]【发布时间】：2013-05-3002:03:43【问题描述】：如何使用jquery/javascript将文本插入json数组。假设我有数据文本文件格式123、456... 查看详情

使用 javascript/jquery 动态调整画布窗口的大小？

】使用javascript/jquery动态调整画布窗口的大小？【英文标题】：Dynamicallyresizecanvaswindowwithjavascript/jquery?【发布时间】：2012-07-0706:47:21【问题描述】：如何使用javascript/jquery调整画布的大小？使用css函数调整大小并将其应用于画布... 查看详情

javascript使用jquery#javascript#jquery将“a”tages滚动到divid(代码片段)

查看详情

Javascript/JQuery .animate() 不工作

】Javascript/JQuery.animate()不工作【英文标题】：Javascript/JQuery.animate()notworking【发布时间】：2013-12-0815:36:20【问题描述】：我正在尝试创建一个滑动图片库，每个间隔它们都会滑动，第一张图片会淡出，新图片会淡入。淡入和淡出... 查看详情

暂停倒计时 javascript jquery

】暂停倒计时javascriptjquery【英文标题】：pausecountdownjavascriptjquery【发布时间】：2014-11-1122:50:23【问题描述】：http://jsfiddle.net/vvccvvcc/mu45bptk/如何暂停计时器？我希望它在达到5秒时停止我试过这个，就像在小提琴中看到的那样elsei... 查看详情

使用 JavaScript / jQuery 进行简单的数字验证

】使用JavaScript/jQuery进行简单的数字验证【英文标题】：SimplenumbervalidationusingJavaScript/jQuery【发布时间】：2011-08-0512:13:47【问题描述】：在JavaScript/jQuery中是否有任何简单的方法来检查变量是否为数字（最好没有插件）？我想提醒... 查看详情

使用 Javascript / Jquery 重写 URL 前缀

】使用Javascript/Jquery重写URL前缀【英文标题】：RewriteURLPrefixUsingJavascript/Jquery【发布时间】：2019-11-2022:16:54【问题描述】：我正在使用javascript从外部API检索一些数据，然后将这些数据显示在HTML页面上。这个返回的数据里面是一个... 查看详情

如何通过 javascript/jquery 事件控制 youtube iframe 声音

】如何通过javascript/jquery事件控制youtubeiframe声音【英文标题】：Howtocontrolayoutubeiframesoundthroughjavascript/jqueryevent【发布时间】：2017-01-1303:49:17【问题描述】：我希望捕捉iframeyoutube视频中提供的声音，以便通过声音按钮停止/播放。... 查看详情

使用 JavaScript 或 jQuery 拆分文件

】使用JavaScript或jQuery拆分文件【英文标题】：SplitfilewithJavaScriptorjQuery【发布时间】：2012-08-1619:54:36【问题描述】：我需要上传文件的一部分（只有第一个MB）。我创建了一个上传整个文件的PHP脚本。数据(formDataObject)通过ajax调用... 查看详情

使用 javascript/jquery 获取 Youtube 视频信息

】使用javascript/jquery获取Youtube视频信息【英文标题】：GettingYoutubeVideoInformationusingjavascript/jquery【发布时间】：2011-07-0820:29:25【问题描述】：<scripttype="text/javascript">varurl="http://gdata.youtube.com/feeds/api/videos/VA770wpLX- 查看详情

iPhone喜欢使用Javascript \ Jquery的选择器控件[重复]

】iPhone喜欢使用Javascript\\\\Jquery的选择器控件[重复]【英文标题】：iPhonelikepickercontrolusingJavascript\\Jquery[duplicate]iPhone喜欢使用Javascript\\Jquery的选择器控件[重复]【发布时间】：2010-06-1409:17:18【问题描述】：我正在寻找可以在网络中... 查看详情