使用JQuery控制单个页面中的多个音频访问 [英] Control Multiple Audio Access in Single Page using JQuery
问题描述
Hiii大家
这是我的音频播放的示例代码.它将缓冲并在10秒钟内开始播放，之后将不再播放与我尝试的场景相同的音频.
This is the sample code for my audio play.It will buffer and start play in 10 secs after that it willnot play again the same audio this the scenario I tried.
<!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;
}
.audiojs {
width: 100%;
}
</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 = "Completed...";
}
}
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>
这是引用 https://kolber.github.io/audiojs/在我的网站上有将近17个音频.每个div都包含单个音频.第一个div的ID为"player(意味着第一个音频)"的音频类似，第二个div为"player1(意味着第二个音频)"音频，在那里.对于第一个div，我所有17个div的按钮均带有下一个问题"问题是所有17个音频都被缓冲并同时播放，而打开页面后，"player(means 1st audio)"将开始缓冲.当我单击next按钮时，第二个音频应开始缓冲.而且，如果我按下上一个按钮播放器(表示第一个音频)"，则不应再播放，因为它只能播放一次.类似地，它适用于所有音频.如果有人给我解决此问题的方法，它将对您有所帮助.我长期在这个问题上苦苦挣扎.请随时帮助我.谢谢.
And this is the reference https://kolber.github.io/audiojs/ In my site I have nearly 17 audio. Each div enclose with single audio. first div is having audio with id "player(means 1st audio)" similarly in 2nd div "player1(means 2nd audio)" audio will be there.for first div I will have one button with "next question" similarly for all 17 divs there will be previous and next button.What is the issue is all 17 audios are buffered and played simultaneously Instead "player(means 1st audio)" will start buffer once the page opened.And when I click next button second audio should start buffer.And if I press previous button "player(means 1st audio)" should not be play again because only one time It should play.Similarly it will work for all audio.If anybody give me solution for this Issue.It will be more helpful.Im struggling in this issue longtime.Please help me anyone.Thanks in advance.
推荐答案
检查以下代码是否符合您的要求.
Check the below code it is as per your requirement.
<!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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<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>
<br/>
<button id="next" disabled>Next</button>
<ol style="display:none;">
<li class=""><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3">dead wrong intro</a></li>
<li class=""><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</a></li>
<li class=""><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a></li>
<li class=""><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/04-islands-is-the-limit.mp3">islands is the limit</a></li>
<li class=""><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/05-one-more-chance-for-a-heart-to-skip-a-beat.mp3">one more chance for a heart to skip a beat</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/06-suicidal-fantasy.mp3">suicidal fantasy</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/07-everyday-shelter.mp3">everyday shelter</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/08-basic-hypnosis.mp3">basic hypnosis</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3">infinite victory</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">the curious incident of big poppa in the nighttime</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">mo stars mo problems</a></li>
</ol>
<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...";
var next = $('ol li.playing').next();
if (!next.length) next = $('ol li').first();
next.addClass('playing').siblings().removeClass('playing');
audio.load($('a', next).attr('data-src'));
audio.play();
}
}
audiojs.events.ready(function() {
var a = audiojs.createAll(settings);
var count = 11;
var counter = setInterval(timer, 1000);
function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
audio.play();
document.getElementById("audio_stats").innerText = "Playing..." + audio.mp3;
$('#next').removeAttr('disabled');
return;
}
document.getElementById("audio_stats").innerText = "Will Start in " + count + " sec.";
}
// Load in the first track
var audio = a[0];
first = $('ol a').attr('data-src');
$('ol li').first().addClass('playing');
audio.load(first);
// Load in a track on click
$('ol li').click(function(e) {
e.preventDefault();
$(this).addClass('playing').siblings().removeClass('playing');
audio.load($('a', this).attr('data-src'));
audio.play();
});
// Keyboard shortcuts
$(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
// right arrow
if (unicode == 39) {
var next = $('li.playing').next();
if (!next.length) next = $('ol li').first();
next.click();
// back arrow
} else if (unicode == 37) {
//var prev = $('li.playing').prev();
//if (!prev.length) prev = $('ol li').last();
//prev.click();
// spacebar
} else if (unicode == 32) {
//audio.playPause();
}
});
$("#next").click(function() {
var next = $('li.playing').next();
if (!next.length) next = $('ol li').first();
next.click();
document.getElementById("audio_stats").innerText = "Playing..." + audio.mp3;
});
});
</script>
</body>
</html>
这篇关于使用JQuery控制单个页面中的多个音频访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
