Управление множественным доступом к аудио на одной странице с помощью JQuery
Hiii Все,
Это пример кода для моего воспроизведения звука. Он будет буферизован и начнет воспроизведение через 10 секунд, после чего он не будет воспроизводить снова тот же звук в этом сценарии, который я пробовал.
<!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 имеет аудио с идентификатором "player(означает 1-й звук)", аналогично, во втором Div "player1(означает 2-й аудио)", аудио будет там. Для первого div у меня будет одна кнопка с "следующим вопросом" аналогично для всех 17 div. там будет предыдущая и следующая кнопка. В чем проблема - все 17 аудио буферизуются и воспроизводятся одновременно. Вместо этого "player(означает 1-е аудио)" запустит буфер, как только откроется страница. И когда я нажму следующую кнопку, второй звук должен запуститься. И если я нажму предыдущую кнопку "проигрыватель (имеется в виду 1-й звук)", его не следует воспроизводить снова, потому что он должен воспроизводиться только один раз. Аналогично, он будет работать для всех аудио. Если кто-нибудь даст мне решение этой проблемы. Это будет более полезно. Я борюсь в этом вопросе давно. Пожалуйста, помогите мне кто-нибудь. Спасибо заранее.
1 ответ
Решение
Проверьте приведенный ниже код в соответствии с вашими требованиями.
<!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>