спасибо
извратилась на другое оформление
а это тогда на будущее запишу
спасибо
🎧 Подкаст «НЕТЕРОЛЕВЫЕ»
Рассказываем и обсуждаем Форумные Ролевые Игры (ФРПГ).
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 - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Коворкинг: обмен вдохновением и опытом » Написание правильного шаблона (по возможности с адаптивом и мобильным)