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?
Répondre
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&server=vimeo.com&show_title=1&show_byline=1&
show_portrait=0&color=&fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=1857085&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&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.
Il utilise une sorte de- « scénario lightbox'-like, extraira le lien ci-dessous pour une démonstration: http://videobox-lb.sourceforge.net/
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 ..
AJAX? Je ne pense pas, c'est trop rapide pour être AJAX (essayez-le vous-même) – Adir
Pour la tête de lecture, vous avez probablement raison, mais la forme d'onde qui s'assombrit est définitivement AJAX. –
Apparemment, ils utilisent Sound Manager 2, un lecteur flash avec des contrôles Javascript.
L'obscurcissement est en fait ingénieur automatique et géré par soundmanager2
- 1. Pourquoi cela fait-il ce qu'il fait?
- 2. Comment cela pourrait-il être mieux fait?
- 3. Comment Snipping Tool fait-il cela?
- 4. ce que cela fait, preg_match
- 5. qu'est-ce que cela fait
- 6. API Soundcloud, PHP et OAuth
- 7. Cela peut-il être fait par sed?
- 8. OpenCV cvSet2d ..... ce que cela fait
- 9. Pourquoi fait-il cela? si - __name__ == '__main__'
- 10. Comment cela est-il fait? (JavaScript ou autre?)
- 11. Comment cela a-t-il pu être fait?
- 12. Comment puis-je écrire un ClassLoader qui fait cela?
- 13. Comment cela se fait-il "Gérer cette liste" sur amazon?
- 14. Comment diable ont-ils fait cela? pad pad numérique personnalisé
- 15. Dartboard iPhone/iPad, comment ont-ils fait cela?
- 16. Comment puis-je savoir ce que cela fait?
- 17. Créer une playlist dans SoundCloud avec PHP
- 18. La méthode d'enregistrement Authlogic. Qu'est-ce que cela fait
- 19. Qu'est-ce que cela fait? tasklist/m "mscor *"
- 20. Quelle différence cela fait-il quand j'utilise '' contre '"?
- 21. À quoi cela fait-il référence dans un attribut onfilterchange?
- 22. Optimisation de requête. Pourquoi TOAD a-t-il fait cela?
- 23. Est-ce que cela peut être fait dans une regex?
- 24. boîte à outils web qui fait tout cela?
- 25. Cela peut-il être fait avec l'ORM? - Django
- 26. Héritage d'une classe, qu'est-ce que cela fait?
- 27. Est-ce que cela peut être fait avec OpenGL?
- 28. Est-ce que cela peut être fait avec jquery?
- 29. Cela peut-il être fait avec une seule requête SQL
- 30. Qu'est-ce que cela fait pour la boucle?
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