Autor | Zpráva | ||
---|---|---|---|
Lenny... Profil |
#1 · Zasláno: 3. 4. 2015, 02:37:54
Zdravím, mám problém- vytvořila jsem(nebo spíš tak po webu poskládala) audio přehrávač v javascriptu, ale potřebovala bych ho na stránku vložit víckrát- pokaždé s jinou písní. Jde to nějak efektně udělat- možná to je banalita, v js začínám a doteď jsem se spokojila jen s měněním prvku po najetí myši..
kód: <audio id="music" preload="true"> <source src="Viktor_Vlasov_Basso_ostinato.mp3" type="audio/mp3"> </audio> <div id="audioplayer2"> <button id="pButton2" class="play" onclick="play()"> </button> <div id="timeline2"> <div id="playhead2"></div> </div> </div> <script type="text/javascript"> var music = document.getElementById('music'); // id for audio element var pButton = document.getElementById('pButton2'); // play button var playhead = document.getElementById('playhead2'); // playhead var timeline = document.getElementById('timeline2'); // timeline var duration; // Duration of audio clip // timeline width adjusted for playhead var timelineWidth = timeline.offsetWidth - playhead.offsetWidth; // timeupdate event listener music.addEventListener("timeupdate", timeUpdate, false); //Makes timeline clickable timeline.addEventListener("click", function (event) { moveplayhead(event); music.currentTime = duration * clickPercent(event); }, false); // returns click as decimal (.77) of the total timelineWidth function clickPercent(e) { return (e.pageX - timeline.offsetLeft) / timelineWidth; } // Makes playhead draggable playhead.addEventListener('mousedown', mouseDown, false); window.addEventListener('mouseup', mouseUp, false); // Boolean value so that mouse is moved on mouseUp only when the playhead is released var onplayhead = false; // mouseDown EventListener function mouseDown() { onplayhead = true; window.addEventListener('mousemove', moveplayhead, true); music.removeEventListener('timeupdate', timeUpdate, false); } // mouseUp EventListener // getting input from all mouse clicks function mouseUp(e) { if (onplayhead == true) { moveplayhead(e); window.removeEventListener('mousemove', moveplayhead, true); // change current time music.currentTime = duration * clickPercent(e); music.addEventListener('timeupdate', timeUpdate, false); } onplayhead = false; } // mousemove EventListener // Moves playhead as user drags function moveplayhead(e) { var newMargLeft = e.pageX - timeline.offsetLeft; if (newMargLeft >= 0 && newMargLeft <= timelineWidth) { playhead.style.marginLeft = newMargLeft + "px"; } if (newMargLeft < 0) { playhead.style.marginLeft = "0px"; } if (newMargLeft > timelineWidth) { playhead.style.marginLeft = timelineWidth + "px"; } } // timeUpdate // Synchronizes playhead position with current point in audio function timeUpdate() { var playPercent = timelineWidth * (music.currentTime / duration); playhead.style.marginLeft = playPercent + "px"; if (music.currentTime == duration) { pButton.className = ""; pButton.className = "play"; } } //Play and Pause function play() { // start music if (music.paused) { music.play(); // remove play, add pause pButton.className = ""; pButton.className = "pause"; } else { // pause music music.pause(); // remove pause, add play pButton.className = ""; pButton.className = "play"; } } // Gets audio file duration music.addEventListener("canplaythrough", function () { duration = music.duration; }, false); </script> CSS: Jestli to k něčemu bude.. #audioplayer2{ width: 350px; height: 30px; margin-left:20px; margin-top:-10px; } #pButton2{ height:50px; width: 50px; margin-top:-10px; border: none; background-size: 50% 50%; background-repeat: no-repeat; background-position: center; float:left; outline:none; background-color:transparent; } .play{ background-image: url(play.png); } .pause{ background-image: url(stop.png); } #timeline2{ width: 250px; height: 46px; margin-top: -10px; float: left; border:none; background-image:url(line.png); } #playhead2{ width: 29px; height: 26px; background-image:url(hlava.png); background-repeat:no-repeat; } |
||
sitole Profil |
#2 · Zasláno: 4. 4. 2015, 11:46:31
Ahoj, dej si přehrávač do souboru např. přehrávač JS.
Samostatný soubor který chceš mít unikátí u každého (velikost, adresa, id tlačítka) si přidej nas stránku do místa kam potřebuješ (musíš navázat spojení se souborem) :) |
||
Lenny... Profil |
#3 · Zasláno: 4. 4. 2015, 15:32:40
sitole:
To jsem zkoušela už před tím než jsem sem psala, ale to nefunguje. Všechny unikátní identifikátory jsem přejmenovala a do stránky jsem vložila jen deklaraci proměnných, pak jsem dala odkaz na samotnej javascript. A ve výsledku se to stále odkazovalo jen na to první audio, ale při tom byl druhej audio přehrávač funkční. Spiš si myslím, že by to chtělo nějakou podmínku(přepínač mezi přehrávačema), aby ten javascript věděl, jaký audio chci zrovna spouštět.. Snažila jsem se něco vymyslet, ale to taky fungovalo tak napůl.. |
||
sitole Profil |
#4 · Zasláno: 5. 4. 2015, 09:35:37
Hele :) Sice to bude celkem prasácký, ale proč ne!
Puží tuhle funkci PHP http://polopate.jakpsatweb.cz/?page=include Do které si dej prasácky celý kod toho přehrávače.. (Každý přehrávač bude mít jiné jméno) Jinak je myslím blbost, aby to přehrávalo jiné audio na které teoreticky nemá možnost se dostat Musíš si dáz pozor na změnu jmen opravdu všude Dále taky mužeš dát audio do jiné složky (Sice nevím proč, ale moblo by to z konciliace hvězd dělat problém :D Jinak taky by pomohlo dát sem odkaz na stránku.. :) |
||
Lenny... Profil |
#5 · Zasláno: 6. 4. 2015, 15:01:14
sitole:
Já bych do toho PHP radši vůbec nemotala.. Myslela sem taky, že bude stačit, když sem dám jenom kód, je sice bez obrázků a mp3, ale funguje to i bez serveru.. Musí to jít i nějak jinak ne? Tahat javascript přes funkci include mi přijde docela zvláštní a když jsem to udělala tak to nefunguje vůbec( na server jsem to dala).. Ono de prostě o to, že se ty přehrávače v tom souboru nějak přebíjí- vždy funguje jen jeden- kliknu na druhý přehrávač a spustí se první i s pohybem hlavy na prvním přehrávači a obráceně.. |
||
sitole Profil |
#6 · Zasláno: 6. 4. 2015, 15:42:08 · Upravil/a: sitole
Lenny...:
Pošleš sem prosím stránku? :) Nezapoměla jsi sen měco zapsat do kodu? O.o http://sitole.tk/saf/ Nahrál jsem tam přesně to co jsi poslala.. + v té samé složce je nahraný soubor 1.mp3 :) |
||
Lenny... Profil |
#7 · Zasláno: 6. 4. 2015, 16:05:22 · Upravil/a: Lenny...
sitole:
PHP: http://lenka-tomaskova.cz/Petr_Vacek/audio.php HTML: http://lenka-tomaskova.cz/Petr_Vacek/audio.html Javascript jsem tam dala pomocí dvou souborů protože sem s tím ještě něco zkoušela..Ale v tomhle stavu je to jedno jestli je tam jeden nebo dva.. Jo a nemáš tam html hlavičku.. |
||
sitole Profil |
#8 · Zasláno: 6. 4. 2015, 16:47:48
Vůbec ale vubec nic tam nafunguje.. Nechápu proč máš ve zdroji kod jako komenář.. :D
Potřebuji kod naprosto toho základního.. Ten kod co jsi tu poskytla jsem naprosto nikde ani nenašel.. Prosím dej napiš sem přesný kod CSS, JS, HTML souboru Přesný.. Ty kody tu a na webu jsou naprosto rozdílné! |
||
Lenny... Profil |
#9 · Zasláno: 6. 4. 2015, 16:50:50
sitole:
Sou úplně stejný- akorát ten co sem poslala v odkazu se odkazuje na externí javascript a je tam dvakrát pokaždý s jinými jmény proměnými.. a to co je tam v komentáři neplatí, to jsem jen něco zkoušela a pak sem to zakomentovala.. |
||
sitole Profil |
#10 · Zasláno: 6. 4. 2015, 16:52:12
Lenny...:
Na holku takovej bordel :D (Doporučuju používat komentáře na komentování :D |
||
Lenny... Profil |
#11 · Zasláno: 6. 4. 2015, 16:53:31
Základní kód přehrávače je v souboru music.js a ten je úplně stejný jako sem sem dávala..
|
||
sitole Profil |
#12 · Zasláno: 6. 4. 2015, 16:56:53
Lenny...:
Kde máš styl pro přehrávač na svém webu? :) |
||
Lenny... Profil |
#13 · Zasláno: 6. 4. 2015, 16:58:23
Když tak na to koukám zapomněla sem tam něco vymazat.. tak já to opravím- bordel je tam protože zkouším co s tím aby to fungovalo..
|
||
sitole Profil |
#14 · Zasláno: 6. 4. 2015, 17:01:12
Lenny...:
Ten styl pro přehrávač? Je normálně v style.css? |
||
Lenny... Profil |
#15 · Zasláno: 6. 4. 2015, 17:03:02 · Upravil/a: Lenny...
sitole:
Opraveno.. Jj.. nakonci style.css A přehrávač funguje v .html(když opomenu to, že to odkazuje furt na stejný přehrávač) ne v .php.. |
||
sitole Profil |
Omlouvám se, ale netuším! Všechno je nastavené odříznutě.. Jak to sakra muže tohle dělat! Doporučuji zavolat moderatora nebo jít s tímmto přímod do diskuse o JS. Tohle je moc odborné..
Moderátor Chamurappi: Nikdy neraď lidem zakládat duplicity, budou smazány.
|
||
Lenny... Profil |
#17 · Zasláno: 6. 4. 2015, 17:20:34
To je úplně jedno jestli je to v celku nebo každý zvlášť.. Když se to dá zvlášť tak je to aspoň přehlednější a dá se s tím víc hejbat.. A k style.css a music.js se taky dostaneš přes tu stránku co sem sem posílala.. Zkusím to tedy hodit do diskuze o JS.. I tak díky..
|
||
Keeehi Profil |
#18 · Zasláno: 7. 4. 2015, 02:13:12
Samozřejmě že se to dá udělat. Jen se nedá moc využívat getElementbyId protože idčka mají být unikátní. Proto je lepší to zařídit přes třídy (getElementsByClassName)
Vyšel jsem z toho vašeho kódu, ale celé jsem to nakonec vlastně přepsal. Výsledek. |
||
Lenny... Profil |
#19 · Zasláno: 7. 4. 2015, 14:52:31
Keeehi:
Skvělý, díky moc. Já vím, že mají být ID unikátní, ale myslela sem, že když je vždy přejmenuju, tak to pude a taky když na to někdo použil ID identifikátory tak to mělo svůj význam.. Taky sem v javascriptu nikdy nic většího nedělala, tak sem do toho "výherního" funkčního scriptu nechtěla moc hrabat.. Už sem i přemýšlela, že když je to takový problém, že tam udělám playlist. Ještě jednou díky.! |
||
Keeehi Profil |
#20 · Zasláno: 7. 4. 2015, 15:13:07
Lenny...:
Problém je, že funkce pro eventy je sdílená, takže tam se getElementById nedá použít, protože to id neznáme. Teoreticky by to mohlo jít třeba tak, že bychom vzali id toho elementu na který bylo kliknuto, vypreparovali z něj to rozlišujcí číslo a to použili pro vytvoření nového řetězce který by měl odpovídat identifikátoru který chceme ale takhle přes třídy a relativně to je lepší. Dá se to udělat ještě méně zavíslé na třídách ale když už tam byly, tak jsem je použil. |
||
Časová prodleva: 9 let
|
0