| Autor | Zpráva | ||
|---|---|---|---|
| David11 Profil |
#1 · Zasláno: 14. 5. 2018, 11:11:36
Dá se nějak (např. pomocí <audio>, ale klidně i jnak) přehrát víc mp3 najednou? Mám např. stránku, na které je v mp3 zpřístupněno hudební CD. Jsou tam pomocí <audio> jednotlivé tracky, ale rád bych tam měl jeden "čudlík", který by přehrál všechny tracky postupně za sebou. - např. kdyby šlo do src zadat postupně src="01.mp3", "02.mp3", atd. úplně by mi to stačilo. Bohužel se mi nedaří přijít na to, jak to udělat. Můžete mi prosím někdo poradit? Diky.
|
||
| T-fon Profil |
#2 · Zasláno: 14. 5. 2018, 15:33:28
Můžeš použít např. toto
|
||
| David11 Profil |
#3 · Zasláno: 14. 5. 2018, 17:53:50
T-fon:
Díky moc. Nedaří se mi ale ten příklad rozchodit... Jsem v javascriptu začátečník, tak dělám zřejmě nějakou hodně primitivní chybu - neporadil bys mi prosím co je v kódu níže špatně? (zřejmě tam vůbec nežije ta obsluha javasrcriptem - když kliknu na nějakou tu skladbu v seznamu skladeb, místo, aby se to změnilo v tom <audio>, zavolá se ta mp3, na kterou jsem klikl, jen jako obyčejný odkaz) <HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<TITLE>Test</TITLE>
<STYLE>BODY {font-family:arial;}
#playlist,audio{background:#666;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;}
</STYLE>
<script>
$(document).ready(function () {
init();
function init(){
var current = 0;
var audio = $('#audio');
var playlist = $('#playlist');
var tracks = playlist.find('li a');
var len = tracks.length - 1;
audio[0].volume = .10;
audio[0].play();
playlist.on('click','a', function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),audio[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
player.load();
player.play();
}
});
</script>
</HEAD>
<BODY>
<audio id="audio" preload="auto" tabindex="0" controls="" >
<source src="http://www.archive.org/download/bolero_69/Bolero.mp3">
Your Fallback goes here
</audio>
<ul id="playlist">
<li class="active">
<a href="http://www.archive.org/download/bolero_69/Bolero.mp3">
Ravel Bolero
</a>
</li>
<li>
<a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">
Moonlight Sonata - Beethoven
</a>
</li>
<li>
<a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">
Canon in D Pachabel
</a>
</li>
<li>
<a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip">
patrikbkarl chamber symph
</a>
</li>
</ul>
</BODY>
</HTML> |
||
| Keeehi Profil |
#4 · Zasláno: 14. 5. 2018, 18:36:28
Problém je, že ti tam chybí jQuery knihovna.
|
||
| David11 Profil |
#5 · Zasláno: 15. 5. 2018, 10:46:12
Keeehi:
Stáhnul jsem si ze stránky jquery.com/download soubor jquery-3.3.1.min.js a řádek <script> z toho výše uvedeného kódu jsem nahradil tímto: <script src="jquery-3.3.1.min.js"> - a pořád nic... chová se to pořád stejně špatně... Můžeš mi prosím poradit? Díky. |
||
| pcmanik Profil |
#6 · Zasláno: 15. 5. 2018, 11:01:42
David11:
Ukazuje ti niečo konzola v prehliadači? |
||
| T-fon Profil |
#7 · Zasláno: 15. 5. 2018, 11:03:52
Ten řádek nenahrazuj, ale napiš to před něj.
|
||
| David11 Profil |
#8 · Zasláno: 15. 5. 2018, 12:52:19
T-fon:
Super, díky, už mi to běží. (Chtělo to před to <script> napsat <script src="jquery-3.3.1.min.js"></script>, tzn. včetně toho ukončovacího </script>, ale to mi došlo.) Rád bych pochopil jak to funguje, protože bych to chtěl použít trochu jinak (trochu jednodušeji - nechci např. mít na té htm stránce ten seznam skladeb - chtěl bych tam mít jen čudlíky dopředu a dozadu a aby se tam jen čistě informativně vypsala jen aktuálně přehrávaná skladba - čili mé následující dotazy směřují k tomu, abych pochopil jak je to v tom scriptu v tom htm udělané). V tom jquery je to <audio> nějak předefinované? Resp. jsou mu tam dodefinované nějaké funkce, které pak používá ten scriptový kód v tom htm? (které to když tak jsou a co zhruba tak dělají?) Resp. jaká je "filosofie" toho obslužného scriptu? (která např. funkce tam zajistí to, že se po dohrání jedné skladby pustí další?) |
||
| David11 Profil |
... taky jsem zjistil, že v IE se po načtení htm stránky automaticky pustí první písnička. V Chrome ne. Dá se to automatické puštění v tom IE nějak vypnout, aby se to chovalo stejně jako v Chrome?
Když vložím jen obyčejné <audio>, nespustí se automaticky ani v Chrome, ani v IE - rád bych, aby se takto chovalo i to zde diskutované rozšířené <audio>. ... a také jsem si všiml, že v Chrome se v tom rozšířeném audiu zobrazuje navíc i ikonka na stažení souboru (v IE ne). Dá se to v tom Chrome nějak vypnout? (u obyčejného audia se nezobrazuje ikonka stažení ani v IE, ani v Chrome - rád bych, aby se takto chovalo i to rozšířené audio.) ... a ještě mě napadlo - když to rozšířené audio umí zobrazit tu ikonku na stažení souboru - neumí náhodou zobrazit i čudlíky na posun na následující resp. předešlou skladbu v playlistu? A v ideálním případě i v řetězci vrátit právě přehrávanou skladbu, abych si ten řetězec mohl vypsat někam na stránku... Můžete mi prosím někdo poradit? Díky. |
||
| T-fon Profil |
#10 · Zasláno: 15. 5. 2018, 14:15:31
Chlape když chceš programovat, nesmíš být línej googlit :)
Object moved Další odkaz Mně se v IE uatomaticky nepouští první písnička, ale pokud se to děje, určitě na stackoverflow najdeš taky řešení. Jinak na netu určitě bude spousta dalších jiných řešení, které ti třeba budou vyhovovat víc. |
||
| David11 Profil |
#11 · Zasláno: 15. 5. 2018, 15:54:37
T-fon:
Díky za radu, controlsList="nodownload" funguje přesně jak potřebuju. Jasně, googlit zkouším... ale má to svý limity... resp. asi já spíš mám svý limity... :-/ Na to automatické nespouštění jsem našel autostart (a jinde autoplay) nastavit na "false" resp. "0", ale nefunguje to... (zkoušel jsem i !autoplay a taky nic...) |
||
| Keeehi Profil |
#12 · Zasláno: 15. 5. 2018, 17:07:03
David11:
Protože autostart s tím v tomto případě nemá nic společného. Spouští ti to totiž řádek 22 v [#3]. To proč se to někde spustí a někde ne je dané tím, že některé prohlížeče nedovolí zavolat metodu play() jen tak, ale jen v návaznosti na nějakou akci (třeba že uživatel na něco klikne). Jelikož ale nechceš, aby se to samo přehrávalo, stačí ten řádek smazat. |
||
| David11 Profil |
#13 · Zasláno: 15. 5. 2018, 18:04:52
Keeehi:
Super, díky, už se mi (až na grafiku) chová IE i Chrome stejně. T-fon: "Jinak na netu určitě bude spousta dalších jiných řešení, které ti třeba budou vyhovovat víc." Tohle (viz odkaz dole) by se mi docela líbilo (grafiku bych si tedy ale předělal) - má to ale tu vadu, že po přehrání jednoho tracku se automaticky nepustí další... což byl můj původní a zároveň nejdůležitější požadavek na funkčnost, kvůli kterému jsem tady založil tohle vlákno... (kdybyste mi někdo poradil jak to tam dodělat, byl bych vám moc vděčný - primárně mi jde o to, aby šlo pustit celé CD tvořené více tracky jedním kliknutím. A pak to přeskakování dopředu a dozadu). Každopádně teď jsem přišel na to, že by se mi líbilo to celé spíše udělat jinak než rozšířením toho tagu <audio>, protože pak bych měl grafiku plně pod svou kontrolou (a v IE to <audio> vypadá naprosto příšerně - nedá se <audiu> vnutit všem prohlížečům nějaký základní jednoduchý grafický styl? - nejlépe jakým ho zobrazuje Chrome - ale to už bych asi chtěl moc, že jo...) www.script-tutorials.com/html5-audio-player-with-playlist |
||
| T-fon Profil |
Tohle ale právě pouští automaticky další tracky, proto jsem na to poslal odkaz.
Edit: sry, blbě čtu :) |
||
| Keeehi Profil |
T-fon:
„Tohle ale právě pouští automaticky další tracky, proto jsem na to poslal odkaz.“ Viz [#13] „Tohle (viz odkaz dole) by se ...“ David11: Tag audio mít víceméně musíš, ale můžeš ho skrýt vytvořit si vlastní rozhraní a javascriptem to celé ovládat. Přesně tak to dělá ten příklad co jsi sem teď dal. Co se týče přidání funkcionality automatického pokračování, tak když to vezmeme z pohledu uživatele, tak teď po skončení písničky musí kliknout na tlačítko další. Takže stačí toto chování vytvořit v JavaScriptu. Řádek 16 říká: Když přehrávání skončí, vykonej následující funkci (akci). Řádek 17 pak zase říká: Na elementech s třídou fwd (což je tlačítko další skladba) vyvolej kliknutí. A to je vše. Jak prosté. function initAudio(elem) {
var url = elem.attr('audiourl');
var title = elem.text();
var cover = elem.attr('cover');
var artist = elem.attr('artist');
$('.player .title').text(title);
$('.player .artist').text(artist);
$('.player .cover').css('background-image','url(data/' + cover+')');;
song = new Audio('data/' + url);
// timeupdate event listener
song.addEventListener('timeupdate',function (){
var curtime = parseInt(song.currentTime, 10);
tracker.slider('value', curtime);
});
// ended event listener
song.addEventListener('ended',function (){
$('.fwd').trigger( "click" );
});
$('.playlist li').removeClass('active');
elem.addClass('active');
} |
||
| David11 Profil |
#16 · Zasláno: 16. 5. 2018, 17:12:58
Keeehi:
Super, díky, podařilo se mi ten projekt rozchodit - a když tam přidám to $('.fwd').trigger( "click" ); přeskočí to na další skladbu - tak jsem za to ještě dopsal $('.play').trigger( "click" ); a už to ten další track i přehrává. Je tam ale drobný zádrhel: Jezdec, který zobrazuje aktuální čas přehrávané skladby se během přehrávání má posouvat - zůstane pak už ale napořád na konci skladby - tzn. když se skladba nezačne přehrávat skutečným kliknutím, ale jen tou metodou trigger, nerefreshuje se ten jezdec (když přehrávání zastavím kliknutím a pak ho znova kliknutím spustím, jezdec se refreshuje a je v ten okamžik dokonce i na správné pozici). Zkoušel jsem před to $('.play').trigger( "click" ); dopsat tracker.slider('value', 0); - a to reaguje, jezdec je pak po celé přehrávání té další skladby na začátku (jasně, nastavil jsem ho na nulu, tak si nestěžuju) - nedaří se mi ale v ten okamžik přečíst správný curtime, abych ho tam nastavil místo té nuly (zřejmě jsem ještě nepochopil jak správně obsluhovat ty události) - mohl bys mi tedy prosím poradit jak zajistit, aby se ten jezdec posouval i při přehrávání další skladby pomocí té simulace toho klikání na fwd a play? |
||
| Keeehi Profil |
#17 · Zasláno: 16. 5. 2018, 18:16:25
David11:
„když se skladba nezačne přehrávat skutečným kliknutím, ale jen tou metodou trigger, nerefreshuje se ten jezdec“ To je velmi podivné a něco takového by se nemělo stát. Tento kód by neměl dělat rozdíly mezi kliknutím co udělal uživatel a tím co spustil javascript. Prosím o odkaz na živou ukázku. |
||
| David11 Profil |
#18 · Zasláno: 16. 5. 2018, 18:57:50
Keeehi:
Tady je to na webu: david11.sweb.cz/test.htm (Těch reklam si tam nevšímej, jsou tam, protože to je na bezplatném swebu.) (Když jsem to tam dával, tak jsem trochu zaváhal, jestli to náhodou neblbne jen když to mám celé lokálně na počítači na disku a zkouším to tam - ale ne, chová se to stejně, i když to pustím z webu. Já všechno zkouším lokálně - zatím mi všechno lokálně fungovalo - kromě cookies, které mi nefungujou lokálně v Chrome. V IE fungujou i lokálně, tak když s nima něco dělám, tak to testuju v IE.) A jestli si to chceš stáhnout celé najednou v jednom souboru, tak tady je odkaz na zip, kde to je všechno zabalené: david11.sweb.cz/zip/test.zip |
||
| David11 Profil |
... a taky jsem teď zjistil, že když skladba hraje, ty tlačítka fwd a rew pouze přeskočí na další skladbu, ale skladba se nezačne přehrávat - jak zařídit, aby se přehrávat začala? Chová se to stejně i v tom původním neupraveném kódu. Zkoušel jsem ho přinutit, aby začal přehrávat tak, že jsem dopsal ten trigger click na konec do fwd a rew, ale to je asi blbost, nefunguje to... (a navíc bych potřeboval, aby se ta další skladba začala přehrávat pouze když se ta předešlá právě přehrávala, čili i kdyby to zafungovalo, ten problém by to nevyřešilo - muselo by se tam ještě nějak zjistit, jestli skladba byla nebo nebyla přehrávaná).
|
||
| David11 Profil |
... původně bylo toto diskusní vlákno založeno zde, v sekci "Jak něco udělat?", protože jsem vůbec netušil jak na to. Ale teď, poté, co se diskuse ubírá jen jedním směrem, bych řekl, že by se to spíše hodilo do sekce "JavaScript". Tak mám dotaz na adminy (nerad bych, aby to bylo bráno jako "tapetování", tak se raději ptám) - můžu v sekci "JavaScript" založit nové vlákno, do kterého (v jednom příspěvku) popíšu problém a nakopíruju tam ty své dva předešlé příspěvky?
Edit: díky za přesunutí celého vlákna do (této) sekce JavaScript. Ten problém je popsán v těch předešlých třech příspěvcích - a je tam i živý příklad na webu (včetně možnosti si to celé stáhnout v jednom zipu) - tak kdybyste mi prosím někdo poradili, byl bych Vám moc vděčný. Díky. |
||
| David11 Profil |
Mohl byste mi prosím někdo pomoct a okomentovat (jak to celé funguje) následující testový příklad?:
[david11.sweb.cz/_test0/test.htm] (Těch reklam nad a pod si nešímejte, je to na bezplatném swebu. Jde o ten prvek audio a playlist pod ním, který po přehrání jednoho tracku začne přehrávat track další.) Já mám zkušenosti s programováním v C++, ale v javascriptu jsem začátečník - ten příklad jsem stáhnul (poradil mi T-fon, díky), ale moc tomu celému nerozumím. Jde mi o úplný základ jak to funguje, omlouvám se, pokud se ptám na nějaké úplně triviální věci. Co znamená to použití funkce function () jako parametr funkce ready? Ta funkce ready se volá automaticky po načtení document (tzn. htm stránky) a ta funkce bez jména function () se zavolá automaticky na konci toho načítání? Co jsou zač ty proměnné audio, playlist, tracks - vůbec netuším jakého jsou typu, resp. co má znamenat to $('#audio') apod... jak se dostat na jednotlivé tracky... Co znamená to klíčové slovo link? Kdybyste mi někdo poradil, byl bych Vám moc vděčný. Díky. ... Pokud jsou mé dotazy (viz předešlé příspěvky) moc obecné, pomohlo by mi, kdybyste mi prosím někdo odpověděl na jiný, konkrétní: Dá se tam do toho kódu nějak zapracovat návaznost na jiný odkaz? Např. že by vedle toho prvku <audio> byl odkaz, který by po kliknutí zavolal funkci, která by přeskočila na další track? Díky. |
||
| David11 Profil |
#22 · Zasláno: 18. 5. 2018, 18:04:03
... dopsal jsem do toho příkladu david11.sweb.cz/_test0/test.htm funkci Preskoc1() a Preskoc2(). Do funkce Preskoc1() to při kliknutí na odkaz nejde, do funkce Preskoc2() jde.
Omlouvám se za pro někoho možná hloupý dotaz, ale můžete mi prosím někdo poradit jak tu funkci koncipovat, aby to do ní při kliknutí na ten odkaz šlo a zároveň aby mohla vyvolat přeskočení na další track (a jak toho přeskočení dosáhnout)? Díky. |
||
|
Časová prodleva: 6 let
|
|||
0