• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak zrobić odtwarzacz muzyki?

VPS Starter Arubacloud
+4 głosów
4,396 wizyt
pytanie zadane 7 lipca 2015 w HTML i CSS przez KaskiPL Początkujący (330 p.)
Chciałbym zrobić coś takiego: http://www.premiumbeat.com/royalty_free_music/songs/mooove-your-hips-shout.

Nie wiem jak się w ogóle do tego zabrać.

5 odpowiedzi

+2 głosów
odpowiedź 7 lipca 2015 przez krecik1334 Maniak (58,390 p.)
Do tego potrzeba JS. Film autorstwa naszego człowieka z forum: https://www.youtube.com/watch?v=5-BuP25Cmo8
+1 głos
odpowiedź 7 lipca 2015 przez shadou102 Pasjonat (21,630 p.)
Wydaje mi się, że do stworzenia takiej strony nie wystarczy sam HTML i CSS.
+1 głos
odpowiedź 7 lipca 2015 przez Dorion300 Szeryf (90,250 p.)

Może prosty tag w HTML'u wystarczy?

<audio src="Tutaj_sciezka_do_pliku" controls></audio>

Działa na mp3 i ogg.

0 głosów
odpowiedź 7 lipca 2015 przez rafal.budzis Szeryf (85,260 p.)
edycja 7 lipca 2015 przez rafal.budzis

http://www.w3schools.com/tags/tag_audio.asp

napewno przydał by ci się też JS do kontrolowania tego znacznika poczytaj na necie :)

ale jeśli starczy ci prosty odtwarzacz którego wygląd kontroluje przeglądarka starczy sam HTML i znacznik <audio>

komentarz 7 lipca 2015 przez Comandeer Guru (599,730 p.)
https://forum.pasja-informatyki.pl/34559/w3schools-nie-szerzmy-falszywej-propagandy - akurat przy obsłudze multimediów tam są popisane największe głupoty!
komentarz 7 lipca 2015 przez Dorion300 Szeryf (90,250 p.)
Akurat w tej chwili pomocne i prawidłowe.
komentarz 7 lipca 2015 przez Comandeer Guru (599,730 p.)
Przy samym tagu może i tak, ale już przy zdarzeniach, bez których nie da się skonstruować customowego odtwarzacza jest bardzo krucho.
0 głosów
odpowiedź 7 lipca 2015 przez niezalogowany
Zacznij od zarysu strony. Potrzebujesz pierw projekt wizualny na którym będziesz się wzorować. Weź sobie np. kartkę a4 i rozrysuj poszczególne elementy z tej strony na niej. W głowie nie pomieścisz tego, bo jak będziesz pisać to sobie pomyślisz "aj, to mogłem dać w całość, a to mogłem zamknąć w jednym boxie". Stwórz w HTML kilkanaście div'ów oraz list <ul><li> i zacznij robić szkic strony CSS'em. Potem to już raczej JS do wzięcia muzyki.

Projekt ambitny i wymagający determinacji, jeśli zniechęcisz się do niego przez to, że jeden element się rozwalił to się nie przejmuj. Na pewno nie zrobisz tego w jeden dzień, więc rozłóż sobie to w czasie. Np. poświęć godzinę-dwie dziennie dodając po kolei element po elemencie i suma sumarum stworzysz tą stronę (chyba, że będziesz mieć silną motywację i będzie Tobie sprawiać radość takie pisanie, to możesz i cały dzień siedzieć :D). Jeżeli znajdzie ci się trudny orzech do zgryzienia to pytaj, postaramy Ci się pomóc i nakierować na odpowiednią drogę.
komentarz 7 lipca 2015 przez KaskiPL Początkujący (330 p.)
edycja 7 lipca 2015 przez KaskiPL

Nie mogę wykombinować jak zrobić, by po skończeniu jednej piosenki włączała się następna. Dołanczam zdjęcie mojej pracy (zdjęcie 1), ale jeśli masz lepszy sposób jak by to lepiej zrobić to chętnie posłucham. przypominam, że chodzi mi o uzyskanie +/- takiego efektu:(zdjęcie 2).

Pomóż

Jeśli masz rozmazanie zdjęcie 1 to:

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <title>muzyka test</title>
    
    
    
    <script type="text/javascript">
    
        var muzyka=new Audio("piosenki/piosenka1.mp3");
        var timer1=0;
        var timer2=0;
        
        function start()
        {
            muzyka.play();
        }
        
        function stop()
        {
            muzyka.pause();
        }
        
        
            
    </script>
    
    
        
</head>

<body>

        <input type="button" value="PLAY" onclick="start()" />
        <input type="button" value="STOP" onclick="stop()" />
    
</body>
</html>

Jeśli masz rozmazane zdjęcie 2 to: http://www.premiumbeat.com/royalty_free_music/songs/mooove-your-hips-shout

komentarz 17 grudnia 2021 przez Patyczakus Nowicjusz (190 p.)

Co do listy - dla ułatwienia wstaw listę z piosenkami. Później dodaj kolejny blok, gdzie deklaruje zmianę piosenki - wtedy będzie deklarowało loopowanie całej listy. Jak to wygląda w praktyce? Więc oto kod:

const listaTytułowPiosenek = [
    "Piosenka1",
    "Piosenka2",
    "Piosenka3"
]

let piosenkaN = 0
let granaPiosenka = new Audio(`${listaTytułowPiosenek[0]}.mp3`)

function start()
{
    granaPiosenka.play()
}

function stop()
{
    granaPiosenka.pause()
}

function nowaPiosenka() {
    setTimeout(function() {
        piosenkaN++
        if (piosenkaN == listaTytułowPiosenek.length) piosenkaN = 0
        granaPiosenka = new Audio(`${listaTytułowPiosenek[piosenkaN]}.mp3`)
        start()
    }, granaPiosenka.length)
    setTimeout(function() {
        nowaPiosenka()
    }, granaPiosenka.length+1)
}

window.onload = nowaPiosenka() //Wtedy do znacznika <body> nie trzeba dawać onload="nowaPiosenka()"
window.onload = start() //Tu też

W razie pytań pisz ;)

Podobne pytania

0 głosów
2 odpowiedzi 294 wizyt
pytanie zadane 30 października 2015 w JavaScript przez Radekoslaw123 Gaduła (3,080 p.)
+1 głos
0 odpowiedzi 381 wizyt
pytanie zadane 10 lutego 2022 w JavaScript przez CanoNee Nowicjusz (230 p.)
+1 głos
1 odpowiedź 297 wizyt
pytanie zadane 18 sierpnia 2021 w Nasze projekty przez qax Dyskutant (8,060 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...