- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我的音乐播放器中,我有一个控制音频对象的功能,当单击播放/暂停按钮时,它决定暂停声音或播放声音。此外,如果单击按钮时正在播放任何其他音频,它会暂停它们并播放与单击按钮相对应的声音。
这是函数:
function manageAudio() {
if (audio.paused) {
//play after 150ms
setTimeout(function() {
audio.play();
}, 150);
$('.playButton.playing').click();
$(thisObj).addClass("bekhon");
$(".sMusicPlyaer").removeClass("nakhon ");
} else {
audio.pause();
$(thisObj).addClass("nakhon");
$(".sMusicPlyaer").removeClass("bekhon");
}
}
这是完整的演示,请查看:
$.fn.MusicPlayer = function(options) {
var settings = $.extend({
// These are the defaults
title: "",
track_URL: "",
load_playlist: ""
}, options);
var audio, thisObj, playPauseBTN;
audio = new Audio();
thisObj = this;
playPauseBTN = $(".playButton", thisObj);
//Statuses Evnts
$(audio).on("playing", function() {
togglePlying(playPauseBTN, true);
$(playPauseBTN).addClass("pause");
});
$(audio).on("pause", function() {
togglePlying(playPauseBTN, false);
$(playPauseBTN).removeClass("pause");
});
thisObj.each(function() {
audio.src = settings.track_URL;
$(".title", thisObj).text(settings.title);
if (settings.load_playlist == "true") {
$(thisObj).css("height", "140px");
$(thisObj).append("<div class='playlist'></div>");
$(".playlist", thisObj).append("<div class='row' data-src='https://p.scdn.co/mp3-preview/c92cc644b1eb5094ce65cf561c41b0c6d9f3faaa'>music 1</div>");
$(".playlist", thisObj).append("<div class='row' data-src='https://p.scdn.co/mp3-preview/dc73c2b8aa08c7b5ac2c72813326fbd6aa65787b'>music 2</div>");
$(".playlist", thisObj).append("<div class='row' data-src='https://p.scdn.co/mp3-preview/b2da3e7ee2834c24fbf5a0927e59d34cc618e30e'>music 3</div>");
}
});
$(playPauseBTN, thisObj).on("click tap", function() {
manageAudio();
});
$(".playlist > .row", thisObj).on("click tap", function() {
audio.src = $(this).attr("data-src");
manageAudio();
});
function manageAudio() {
if (audio.paused) {
//play after 150ms
setTimeout(function() {
audio.play();
}, 150);
console.log("print");
$('.playButton.playing').click();
$(thisObj).addClass("bekhon");
$(".sMusicPlyaer").removeClass("nakhon ");
} else {
audio.pause();
$(thisObj).addClass("nakhon");
$(".sMusicPlyaer").removeClass("bekhon");
}
}
}
// Utility functions
function togglePlying(aClassName, bool) {
$(aClassName).toggleClass("playing", bool);
}
$("#player1").MusicPlayer({
title: "title 1",
track_URL: "https://rjmediamusic.com/media/mp3/mp3-256/Alireza-JJ-Sijal-Nassim-Ki-Khoobe-Ki-Bad-(Ft-Behzad-Leito-Sami-Low-AFX).mp3"
});
$("#player2").MusicPlayer({
title: "title 2",
track_URL: "http://myst729.qiniudn.com/within-temptation_pale.mp3",
load_playlist: "true"
});
$("#player3").MusicPlayer({
title: "title 3",
track_URL: "https://p.scdn.co/mp3-preview/657f7141682f667253bf9c3afab5feebccf75105"
});
body {
background: url(http://wallpapercave.com/wp/VkyGWEi.jpg) no-repeat;
background-size: cover;
}
.sMP {
background: rgba(255, 255, 255, 0.5);
color: #000;
width: 400px;
height: 50px;
margin: 10px;
}
.playButton {
background: url(https://cdn4.iconfinder.com/data/icons/standard-free-icons/139/Play01-64.png);
background-size: 30px 30px !important;
width: 30px;
height: 30px;
}
.playButton.pause {
background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-pause-48.png);
}
.row {
border: 1px solid black;
margin: 5px 0 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sMP" id="player1">
<div class="playButton"></div>
<div class="title"></div>
</div>
<div class="sMP" id="player2">
<div class="playButton"></div>
<div class="title"></div>
</div>
<div class="sMP" id="player3">
<div class="playButton"></div>
<div class="title"></div>
</div>
JSFiddle :
要查看错误,请单击播放器 2 中的播放按钮,然后通过单击同一播放列表中的另一个轨道来更改轨道。它最终会出现Uncaught RangeError:超出最大调用堆栈大小(…)
错误。它很可能与 $('.playButton.playing').click();
有关。
有什么解决办法吗?
最佳答案
您必须确保单击当前播放列表之外的播放按钮。
因此,您可以执行以下操作,而不是执行 $('.playButton.playing').click();
:
var $playing = $('.playButton.playing');
if ($(thisObj).find($playing).length === 0) {
$playing.click();
}
这样您就不会再次点击中间框中的播放按钮。
关于javascript - 如何停止播放/暂停控制功能中的无限循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40537887/
大家好,我完成了这个基本的 C 程序,它向输入任何给定数字集的用户显示有序集、最小值、最大值、平均值和中值。我遇到的问题是,当我打印数字时,我必须使用诸如“3.2%f”之类的东西来设置标准的精度,我怎
我有这个基于 Python 的服务守护进程,它正在执行大量多路复用 IO(选择)。 从另一个脚本(也是 Python)我想查询这个服务守护进程的状态/信息和/或控制处理(例如暂停它、关闭它、更改一些参
我读到 Fortran 对表达式求值的顺序有严格的规则。对于某些数值算法来说,这一点非常重要。 数值 C 程序如何控制浮点运算的顺序并防止编译器“优化”到不需要的运算顺序,例如将 (a*b)*c 更改
上下文: 整个问题可以概括为我正在尝试复制调用system(或fork)的行为,但在 mpi 环境中。 (事实证明,你不能并行调用system。)这意味着我有一个程序在许多节点上运行,每个节点上有一个
我考虑过控制scanf来接受c中的任何输入。我的概念是等待10秒(或任何其他时间)来接受任何输入。10秒后它将退出并且不再接收任何输入。 int main(){ int a,b,c,d; sca
我正在尝试使用生成器停止 setTimeOut 上的执行流程。我究竟做错了什么?我无法让 console.log 每 1500 毫秒退出一次。我是 node 的新手,如果我在做一件非常愚蠢的事情,请不
我希望我的应用程序的 Activity 堆栈包含同一 Activity 的多个实例,每个实例处理不同的数据。因此,我将让 Activity A 在我的 Activity 堆栈中处理数据 a、b、c 和
我有这个 bash 文件,它向设备询问 OpenSSH 的 IP、密码等。 现在,如果我使用 ssh root@ip,我必须输入密码。这真的很烦人。第二;我不能让我的脚本向它发送命令。 这就是我想要的
我正在尝试测试我有权访问的机器的缓存属性。为此,我正在尝试读取内存并对其计时。我改变工作集大小和步幅访问模式以获得不同的测量值。 代码如下所示: clock1 = get_ticks() for (i
我正在尝试编写一个 makefile 来替换用于构建相当大的应用程序的脚本之一。 当前脚本一次编译一个文件,使用 make 的主要原因是并行化构建过程。使用 make -j 16 我目前在办公室服务器
我正在制作一个小的测试程序,它演示了一个粗糙的控制台界面。 该程序是一个低于标准的典型获取行、响应程序,它甚至不识别“退出”,并希望您通过按 control-c 强制退出。在 Mingw32 上完成。
好的,我有一个 VOIP 电话。我知道电话的 IP 地址和端口,并且可以完全访问电话,我正在使用它通过 SIP 中继调用 SIP 电话。 我基本上想随时查看手机上发生的事情,但我不知道从哪里开始。 如
是否可以指定 CWinApp::WriteProfileString() 使用的应用程序名称? 如果我使用 CWinApp::SetRegistryKey 将我的公司名称设置为“MyCompany”,
我正在尝试用 Python 控制 Tor。我在 stackoverflow 上阅读了其他几个关于这个主题的问题,但没有一个能回答这个问题。 我正在寻找一种方法,以便在命令运行时为您提供“新身份”、新
最近在做一个项目,涉及到iPhone设备和手表传输数据、控制彼此界面跳转,在网上找了很多资料,发现国内的网站这方面介绍的不多,而国外的网站写的也不是很全,所以在这写这篇文章,给大家参考一下,望大神指
我想增加图中值的范围。在示例中,值的范围从 50 到 200。但是,我需要按如下方式分配值:50 75 100 125 150 175 200 并且最好使用 scale_fill_gradientn
我有一个IconButton,当按下时波纹效果是圆形的并且比按钮的面积大,我怎样才能减少点击按钮时波纹效果的大小? IconButton( constraints
我正在使用代码契约(Contract)为我的项目生成附属程序集。基本上它为项目的 MyAssembly.dll 创建一个 MyAssembly.Contracts.dll。这应该放在你的程序集旁边,但
我想使用分面绘制图形,其中面板之间的边缘不同。面板按字母顺序自动排序(按照 ggplot 中的惯例)。一个简单的例子: library(igraph) library(ggraph) g <- mak
我想为我的 Android 应用程序创建一个小部件,以显示有关位置的一些实时详细信息,例如天气。但我想在任何时候允许最多 3 个小部件实例,每个实例都有不同的位置。我不确定该怎么做,也找不到任何信息。
我是一名优秀的程序员,十分优秀!