2010-02-09 8 views
0

Leur interface utilisateur est pure HTML, CSS et JS, alors comment ils jouent l'audio?
Vous impliquez un lecteur flash caché?Comment SoundCloud a-t-il fait cela?

+0

S'il vous plaît voir [cette grande réponse] (http://stackoverflow.com/a/12271972/1004889) compatriote SC @nickf a donné à [une question très similaire] (http://stackoverflow.com/questions/12263672/how-is-soundcloud-player-programmed). – pje

Répondre

0

Le code embed pour leur vidéo de démonstration ressemble à ceci:

<object width="400" height="250"><param name="allowfullscreen" value="true" /> 
<param name="allowscriptaccess" value="always" /> 
<param name="movie" value="http://vimeo.com/moogaloop.swf? 
    clip_id=1857085&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp; 
    show_portrait=0&amp;color=&amp;fullscreen=1" /> 
<embed src="http://vimeo.com/moogaloop.swf?clip_id=1857085&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="250"></embed></object><p><a href="http://vimeo.com/1857085">SoundCloud: The Tour</a> from <a href="http://vimeo.com/soundcloud">SoundCloud</a> on <a href="http://vimeo.com">Vimeo</a>.</p> 

bla bla bla. L'extension .swf est le cadeau. C'est Adobe Flash.

+0

Mais comment ils ont fait la connexion entre les boutons HTML (comme jouer, pause, chercher ...) et le fichier swf? – Adir

+0

Les boutons font très probablement partie de la programmation du fichier .swf lui-même. –

+0

Etes-vous sûr? Le site fonctionne correctement sur un iPad. – Nic

0

Pas tout à fait les gars, leur lecteur audio est en effet html pur et est tout à fait très intelligent. Ils génèrent un côté serveur de forme d'onde lorsque l'audiofile est téléchargé, construisent un lecteur avec des widgets html standard et utilisent les appels AJAX pour déplacer la tête de lecture et assombrir la forme d'onde pendant que l'audio est en mémoire tampon.

Ici vous pouvez voir un exemple, si vous regardez cela dans Firebug vous verrez l'attribut width est en constante évolution pour le déplacer vers l'avant comme il joue ..

<div class="playhead" style="width: 32.75630235388422%;"></div> 

Alex ..

+0

AJAX? Je ne pense pas, c'est trop rapide pour être AJAX (essayez-le vous-même) – Adir

+0

Pour la tête de lecture, vous avez probablement raison, mais la forme d'onde qui s'assombrit est définitivement AJAX. –

1

L'obscurcissement est en fait ingénieur automatique et géré par soundmanager2

Questions connexes