21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
Lenny...
Profil
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
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
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
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
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
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
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
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
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
Lenny...:
Na holku takovej bordel :D (Doporučuju používat komentáře na komentování :D
Lenny...
Profil
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
Lenny...:
Kde máš styl pro přehrávač na svém webu? :)
Lenny...
Profil
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
Lenny...:
Ten styl pro přehrávač? Je normálně v style.css?
Lenny...
Profil
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
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
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
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
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.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0