спасибо
извратилась на другое оформление
а это тогда на будущее запишу
спасибо
🎧 Подкаст «НЕТЕРОЛЕВЫЕ»
Рассказываем и обсуждаем Форумные Ролевые Игры (ФРПГ).
Telegram Обсудить
ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Коворкинг: обмен вдохновением и опытом » Написание правильного шаблона (по возможности с адаптивом и мобильным)
спасибо
извратилась на другое оформление
а это тогда на будущее запишу
спасибо
Ну на input и img свои картинки типично вставляют через минимизацию ширины=высоты до нуля и добавление нужных паддигов с фоновой картинкой на такой элемент
Отредактировано Deff (09.10.23 21:50)
Ну на input и img свои картинки типично вставляют через минимизацию ширины=высоты до нуля и добавление нужных паддигов с фоновой картинкой на такой элемент
да я вообще сейчас загналась на минимум картинок
чисто цвета в css и скрипты (по аналогии с тем, про который спрашивала)
вроде сейчас вообще пока ни одной картинки не использовала кроме Аватара хД
Enima
Я не про картинки - а как оформить эти элементы - если они уже стоят - своей иконкой не через :before или :after
Отредактировано Deff (09.10.23 22:01)
Enima
Я не про картинки - а как оформить эти элементы - если они уже стоят - своей иконкой не через :before или :after
аааадо меня как до утки сегодня
тоже нужно будет попробовать как вариант в будущем
нашла тут весьма неплохой аудио плеер
пытаюсь его немного скорректировать для форумов
если с дизом элементов еще могу сама разобраться
то вот с js нужна помощь
не понимаю в нем от слова совсем
подскажите можно ли переключение треков сделать автоматом?
сейчас если песня проигралась она встает на начало и останавливается, а не переходит к след треку
хотелось бы автоматом сделать что б не каждый раз по кнопкам тыкать
в идеале бы еще при обновлении страницы показывать трек, который был последним, а не перелетал на первый
$(function () {
var playerTrack = $("#player-track"),
albumName = $("#album-name"),
trackName = $("#track-name"),
albumArt = $("#album-art"),
sArea = $("#s-area"),
seekBar = $("#seek-bar"),
trackTime = $("#track-time"),
insTime = $("#ins-time"),
sHover = $("#s-hover"),
playPauseButton = $("#play-pause-button"),
i = playPauseButton.find("i"),
tProgress = $("#current-time"),
tTime = $("#track-length"),
seekT,
seekLoc,
seekBarPos,
cM,
ctMinutes,
ctSeconds,
curMinutes,
curSeconds,
durMinutes,
durSeconds,
playProgress,
bTime,
nTime = 0,
buffInterval = null,
tFlag = false,
albums = [
"Dawn",
"Me & You",
"Electro Boy",
"Home",
"Proxy (Original Mix)"
],
trackNames = [
"Skylike - Dawn",
"Alex Skrindo - Me & You",
"Kaaze - Electro Boy",
"Jordan Schor - Home",
"Martin Garrix - Proxy"
],
albumArtworks = ["_1", "_2", "_3", "_4", "_5"],
trackUrl = [
"https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/2.mp3",
"https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/1.mp3",
"https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/3.mp3",
"https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/4.mp3",
"https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/5.mp3"
],
playPreviousTrackButton = $("#play-previous"),
playNextTrackButton = $("#play-next"),
currIndex = -1;
function playPause() {
setTimeout(function () {
if (audio.paused) {
playerTrack.addClass("active");
albumArt.addClass("active");
checkBuffering();
i.attr("class", "fas fa-pause");
audio.play();
} else {
playerTrack.removeClass("active");
albumArt.removeClass("active");
clearInterval(buffInterval);
albumArt.removeClass("buffering");
i.attr("class", "fas fa-play");
audio.pause();
}
}, 300);
}
function showHover(event) {
seekBarPos = sArea.offset();
seekT = event.clientX - seekBarPos.left;
seekLoc = audio.duration * (seekT / sArea.outerWidth());
sHover.width(seekT);
cM = seekLoc / 60;
ctMinutes = Math.floor(cM);
ctSeconds = Math.floor(seekLoc - ctMinutes * 60);
if (ctMinutes < 0 || ctSeconds < 0) return;
if (ctMinutes < 0 || ctSeconds < 0) return;
if (ctMinutes < 10) ctMinutes = "0" + ctMinutes;
if (ctSeconds < 10) ctSeconds = "0" + ctSeconds;
if (isNaN(ctMinutes) || isNaN(ctSeconds)) insTime.text("--:--");
else insTime.text(ctMinutes + ":" + ctSeconds);
insTime.css({ left: seekT, "margin-left": "-21px" }).fadeIn(0);
}
function hideHover() {
sHover.width(0);
insTime.text("00:00").css({ left: "0px", "margin-left": "0px" }).fadeOut(0);
}
function playFromClickedPos() {
audio.currentTime = seekLoc;
seekBar.width(seekT);
hideHover();
}
function updateCurrTime() {
nTime = new Date();
nTime = nTime.getTime();
if (!tFlag) {
tFlag = true;
trackTime.addClass("active");
}
curMinutes = Math.floor(audio.currentTime / 60);
curSeconds = Math.floor(audio.currentTime - curMinutes * 60);
durMinutes = Math.floor(audio.duration / 60);
durSeconds = Math.floor(audio.duration - durMinutes * 60);
playProgress = (audio.currentTime / audio.duration) * 100;
if (curMinutes < 10) curMinutes = "0" + curMinutes;
if (curSeconds < 10) curSeconds = "0" + curSeconds;
if (durMinutes < 10) durMinutes = "0" + durMinutes;
if (durSeconds < 10) durSeconds = "0" + durSeconds;
if (isNaN(curMinutes) || isNaN(curSeconds)) tProgress.text("00:00");
else tProgress.text(curMinutes + ":" + curSeconds);
if (isNaN(durMinutes) || isNaN(durSeconds)) tTime.text("00:00");
else tTime.text(durMinutes + ":" + durSeconds);
if (
isNaN(curMinutes) ||
isNaN(curSeconds) ||
isNaN(durMinutes) ||
isNaN(durSeconds)
)
trackTime.removeClass("active");
else trackTime.addClass("active");
seekBar.width(playProgress + "%");
if (playProgress == 100) {
i.attr("class", "fa fa-play");
seekBar.width(0);
tProgress.text("00:00");
albumArt.removeClass("buffering").removeClass("active");
clearInterval(buffInterval);
}
}
function checkBuffering() {
clearInterval(buffInterval);
buffInterval = setInterval(function () {
if (nTime == 0 || bTime - nTime > 1000) albumArt.addClass("buffering");
else albumArt.removeClass("buffering");
bTime = new Date();
bTime = bTime.getTime();
}, 100);
}
function selectTrack(flag) {
if (flag == 0 || flag == 1) ++currIndex;
else --currIndex;
if (currIndex > -1 && currIndex < albumArtworks.length) {
if (flag == 0) i.attr("class", "fa fa-play");
else {
albumArt.removeClass("buffering");
i.attr("class", "fa fa-pause");
}
seekBar.width(0);
trackTime.removeClass("active");
tProgress.text("00:00");
tTime.text("00:00");
currAlbum = albums[currIndex];
currTrackName = trackNames[currIndex];
currArtwork = albumArtworks[currIndex];
audio.src = trackUrl[currIndex];
nTime = 0;
bTime = new Date();
bTime = bTime.getTime();
if (flag != 0) {
audio.play();
playerTrack.addClass("active");
albumArt.addClass("active");
clearInterval(buffInterval);
checkBuffering();
}
albumName.text(currAlbum);
trackName.text(currTrackName);
albumArt.find("img.active").removeClass("active");
$("#" + currArtwork).addClass("active");
} else {
if (flag == 0 || flag == 1) --currIndex;
else ++currIndex;
}
}
function initPlayer() {
audio = new Audio();
selectTrack(0);
audio.loop = false;
playPauseButton.on("click", playPause);
sArea.mousemove(function (event) {
showHover(event);
});
sArea.mouseout(hideHover);
sArea.on("click", playFromClickedPos);
$(audio).on("timeupdate", updateCurrTime);
playPreviousTrackButton.on("click", function () {
selectTrack(-1);
});
playNextTrackButton.on("click", function () {
selectTrack(1);
});
}
initPlayer();
});Отредактировано Enima (12.10.23 20:59)
Enima
Ну тут если поможет, то наверно ток @Emerael ( я туп в аудио)
нашла тут весьма неплохой аудио плеер
по описанию того, что тебе нужно, неплохой аудио плеер тут: - Кастомизируемый mp3 плеер (CSS, JS)
а тот, что ты сейчас пытаешься расковырять, даже близко к твоим запросам не стоит
Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.
Скрытый текст (от 9999999999999999 сообщений):
ты понимаешь, что ты сокращаешь количество людей, которое может тебе помочь??
Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.
#p189303,Enima написал(а):нашла тут весьма неплохой аудио плеер
по описанию того, что тебе нужно, неплохой аудио плеер тут: - Кастомизируемый mp3 плеер (CSS, JS)
а тот, что ты сейчас пытаешься расковырять, даже близко к твоим запросам не стоит
Я его видела, но хотелось чего то более сложного в плане визуала
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Коворкинг: обмен вдохновением и опытом » Написание правильного шаблона (по возможности с адаптивом и мобильным)