使用JQuery只播放一次AutoPlay音频
使用JQuery只播放一次AutoPlay音频
提问于 2017-02-13 21:56:12
以下是音频播放器的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>audio.js</title>
<script src="./audiojs/audio.min.js"></script>
<link rel="stylesheet" href="./includes/index.css" media="screen">
<script>
audiojs.events.ready(function() {
audiojs.createAll();
});
</script>
</head>
<body>
<header>
<h1>audio.js</h1>
</header>
<audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" preload="auto"></audio>
</body>
</html>有了这个，我想添加一些约束，比如不想显示播放button.Instead，它将在10秒后自动播放，并且它只能播放一次。我该如何处理这个。如果有人知道解决方案，请帮助我摆脱这个问题。参考。https://kolber.github.io/audiojs/
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-14 15:58:04
您可以通过将.play-pause的样式更改为display:none来隐藏播放/暂停按钮
设置autoplay为false，避免加载时播放，10秒后使用setTimeout播放。
请参阅下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>audio.js</title>
<script src="./audiojs/audio.min.js"></script>
<link rel="stylesheet" href="./includes/index.css" media="screen">
<style>
.play-pause {
display: none;
}
.scrubber {
display: none;
}
.audiojs {
width: 110px;
}
.audiojs .time {
border-left: none;
}
</style>
</head>
<body>
<header>
<h1>audio.js</h1>
</header>
<audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" id="player"></audio>
<label id="audio_stats"></label>
<script>
var element = document.getElementById("player");
var settings = {
autoplay: false,
loop: false,
preload: true,
swfLocation: 'audiojs/audiojs.swf',
trackEnded: function (e) {
document.getElementById("audio_stats").innerText = "Track Ended...";
}
}
audiojs.events.ready(function () {
var a = audiojs.create(element, settings);
var count = 11;
var counter = setInterval(timer, 1000);
function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
a.play();
document.getElementById("audio_stats").innerText = "Playing...";
return;
}
document.getElementById("audio_stats").innerText = "Will Start in " + count + " sec.";
}
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42205776
复制相关文章
相似问题
腾讯云开发者
