Всех приветствую. Сделал аудио-плеер, и вроде всё работает. Но хотел бы попросить знающих и опытных людей посмотреть мой код - правильно ли написано. Не ресурсоемкий ли получился. Чтобы было понятно, везде написал комментарии:
// <Аудио>
var audio;
var vol = 0.5;
// Изменение звука (ползунком):
$("#vol").on("input", function(event) {
vol = event.target.value;
audio.volume = vol;
});
// Клик на текстовок "изображение" звука (рядом с ползунком) - выключение и включение звука:
$("#volImg").click(function() {
if($(this).data("status") == "on") {
audio.muted = true;
$(this).text("????").data("status", "off");
}else{
audio.muted = false;
$(this).text("????").data("status", "on");
}
});
// Клик на знак повтора аудио:
$("#repeat").click(function() {
if($(this).data("status") == "off") {
audio.loop = true;
$(this).css("color", "#FFF").data("status", "on");
}else{
audio.loop = false;
$(this).css("color", "#9D9D9D").data("status", "off");
}
});
// Клик на основную кнопку - проиграть и пауза:
$("#playPause").click(function(){
if(audio === undefined){ // Если аудио еще не загружено
$("#audioPlayer").slideDown(500); // По умолчанию блок с проигрывателем скрыт (кнопка "#playPause" тоже, но на него нажимается через другую кнопку)
audio = new Audio();
audio.autoplay = false;
audio.controls = false;
audio.volume = vol;
audio.src = "001.mp3";
$(this).text("\u23f8");
audio.play();
}else{ // Если аудио уже было загружено
if($(this).text() == "\u25b6") {
$(this).text("\u23f8");
audio.play();
} else {
$(this).text("\u25b6");
audio.pause();
}
}
});
// Функция дляотображения времени (то, что обновляется)
(function curTimeAud(){
if(audio !== undefined) {
var curT = audio.currentTime;
var drtn = audio.duration;
if (parseInt(curT) - parseInt(curT/60)*60 < 10) var curTSec = "0" + (parseInt(curT) - parseInt(curT/60)*60); // Если секунды меньше 10-и, ставим перед ними 0.
else var curTSec = parseInt(curT) - parseInt(curT/60)*60;
if(parseInt(drtn) - parseInt(drtn/60)*60 < 10) var drtnSec = "0" + (parseInt(drtn) - parseInt(drtn/60)*60); // Если секунды меньше 10-и, ставим перед ними 0.
else var drtnSec = parseInt(drtn) - parseInt(drtn/60)*60;
$("#curTime").text(parseInt(curT / 60) + ":" + curTSec); // Отображение текущего положения, в формате "м:сс" ("мм:сс", "ммм:сс")
$("#maxTime").text(parseInt(drtn / 60) + ":" + drtnSec); // Отображение продолжительности аудио, в формате "м:сс" ("мм:сс", "ммм:сс")
$("#audioTime").attr("max", drtn); // Атрибут "max" для ползунка времени аудио (type="range")
$("#audioTime").val(curT); // Текущее положение ползунка (type="range")
if(audio.ended && audio.autoplay == false){ //Что делать, когда аудио проигрывается до конца, а повтор не включен
audio.load();
$("#playPause").text("\u25b6");
}
}
setTimeout(curTimeAud, 10); // Обновление функции каждые 10 мс
}).call(this); //Вызов функции
$("#audioTime").on("input", function(event){audio.currentTime = event.target.value}); // Перемещение ползунка времени
$("#stepFwd").click(function(){audio.currentTime = audio.currentTime + 10}); // Действие при клике кнопки "Вперед на 10 сек"
$("#stepbckw").click(function(){audio.currentTime = audio.currentTime - 10}); // Действие при клике кнопки "Назад на 10 сек"
// </Аудио>