Случайное аудио
Помогите, у меня есть скрипт с аудио. Как можно сделать что бы было несколько случайных треков которые будут открываться.
Вот сам скрипт
<!DOCTYPE html>
<html class="full" lang="ru">
<head>
<script>
function timeColor() {
var now = new Date();
var hours = now.getHours();
var color = "#f2d44e";
if(hours >= 20 || hours < 7)
color = "#FFFF00"
return color;
}
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = 'audio/Nightcore.mp3';
audio.controls = false;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
document.getElementById('audio_box').appendChild(audio);
context = new AudioContext(); // AudioContext object instance
analyser = context.createAnalyser(); // AnalyserNode method
canvas = document.getElementById('analyser_render');
ctx = canvas.getContext('2d');
// Re-route audio playback into the processing graph of the AudioContext
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper(){
window.requestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.fillStyle = timeColor(); // Color of the bars
bars = 500;
for (var i = 0; i < bars; i++) {
bar_x = i * 3;
bar_width = 2;
bar_height = -(fbc_array[i] / 3);
// fillRect( x, y, width, height ) // Explanation of the parameters below
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
}
</script>
</head>
<body>
<div id="mp3_player">
<div id="audio_box"></div>
<canvas id="analyser_render" STYLE="height:30px;position: fixed; bottom: 0;width: 100%; margin: 0 auto;"></canvas>
</div>
</body>
|
MininDM,
Здравствуйте! Судя по вашему сообщению, вы ну совсем не знаете javascript. Освойте основы языка и вопрос отпадет сам, полностью или частично. На сайте javascript можно начать изучать с учебника, раздел Основы javascript. Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/ audio.src = ['audio/Nightcore.mp3','audio/Nightcore.mp3','audio/Nightcore.mp3'][Math.random()*3|0]; |
рони,
Я хотел что бы после того как 1 трек отыграет открывался другой, а таким способом по-моему так не будет работать.И да в java я 0:dance: |
MininDM,
может быть в раздел работа? |
рони,
Это просто для фан проекта, просто интересны разные алгоритмы на js |
Установить audio.loop = false; или убрать эту строку вообще.
Создать массив с названиями файлов. На пример: var myfiles=["1.mp3","2.mp3","3.mp3","4.mp3","5.mp3"];Все эти файлы должны быть в папке audio. После 20 строки вставить это:
audio.onended=function(){
this.src="audio/"+myfiles[Math.floor(Math.random()*5)];
this.play();
}
|
Опан,
Спасибо, но я знаю как это сделать. Мне бы было бы интереснее как сделать что бы повторов не было(что бы один и тот же трек не выпадал, пробовал с бесконечным циклов+ if + break. Не получилось) P.S. Извиняюсь за не правильно поставленный вопрос. |
Тогда после строки
var myfiles=["1.mp3","2.mp3","3.mp3","4.mp3","5.mp3"];вставьте var myusedtracks=[false,false,false,false,false];а после 20 строки это:
audio.onended=function(){
while(myusedtracks.indexOf(false)!=-1){
var index=Math.floor(Math.random()*5);
while(myusedtracks[index]==true){
var index=Math.floor(Math.random()*5);
};
myusedtracks[index]=true;
this.src="audio/"+myfiles[index];
this.play();
};
};
|
Опан,
:blink: |
Я чуть ошибся. Нужно
audio.onended=function(){
if(myusedtracks.indexOf(false)==-1)break;
var index=Math.floor(Math.random()*5);
while(myusedtracks[index]==true){
var index=Math.floor(Math.random()*5);
};
myusedtracks[index]=true;
this.src="audio/"+myfiles[index];
this.play();
};
|
Опан,
var myfiles=["1.mp3","2.mp3","3.mp3","4.mp3","5.mp3"];
audio.onended= function (){
var len = myfiles.length;
if(len){
len *= Math.random();
len |= 0;
len = "audio/"+myfiles.splice(len,1)[0]
this.src=len;
this.play();
}
};
|
Цитата:
|
Цитата:
|
Опан,
выбирайте элементы массива случайно, пока он не закончится |
Я, рони, запустил Ваш код, но после окончания первого трека, новый автоматически не начинает играть
...Пардон, всё в порядке. |
рони, Опан,
Вот так должен выглядеть код? Но по-моему здесь лишняя переменная audio
<script>
function timeColor() {
var now = new Date();
var hours = now.getHours();
var color = "#f2d44e";
if(hours >= 20 || hours < 7)
color = "#FFFF00"
return color;
}
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
var myfiles=["longlost.mp3","Nightcore.mp3"];
audio.controls = false;
audio.autoplay = true ;
audio.onended= function (){
var len = myfiles.length;
if(len){
len *= Math.random();
len |= 0;
len = "audio/"+myfiles.splice(len,1)[0]
this.src=len;
this.play();
}
};
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
document.getElementById('audio_box').appendChild(audio);
context = new AudioContext(); // AudioContext object instance
analyser = context.createAnalyser(); // AnalyserNode method
canvas = document.getElementById('analyser_render');
ctx = canvas.getContext('2d');
// Re-route audio playback into the processing graph of the AudioContext
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper(){
window.requestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.fillStyle = timeColor(); // Color of the bars
bars = 500;
for (var i = 0; i < bars; i++) {
bar_x = i * 3;
bar_width = 2;
bar_height = -(fbc_array[i] / 3);
// fillRect( x, y, width, height ) // Explanation of the parameters below
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
}
</script>
|
Цитата:
|
Опан,
По-моему эта переменная не где не используется, но я могу ошибаться. |
Она используется в строках 15, 16, 17, 33 и 39. Пользуйтесь редактором ноутпед++, там в одном месте выделили любую переменную, а она везде подкрашивается. Сразу видно, где она используется. Внутри функции audio.onended() каждое this означает тоже обращение к audio. На пример this.play();
|
Опан,
А можешь сказать где у меня ошибка в коде т.к. не работает, может я где-то скобки не закрыл или ещё что-то не так сделал |
Если в браузере Опера - не будет работать. Там нужен аудиоформат OGG. А если в Хроме или Мозилле не работает - скоро проверю.
... Ага, не указан audio.src На пример, после 14 строки: audio.src="longlost.mp3"; |
Опан,
Не пашет |
А что говорит консоль? У меня работает. Правда, получается, что первая песня всегда одна и та же, и не входит в учёт неповторения, а не повторяются только начиная со второй.
|
Опан,
Какая консоль? Это у меня в html. |
Цитата:
|
Paguo-86PK,
Опан, нашёл ошибку |
| Часовой пояс GMT +3, время: 11:14. |