Comment puis-je jouer de la musique à l'aide de CSS?

Comment puis-je faire jouer de la musique lors de ma page se charge à l'aide de CSS?

J'ai besoin de musique pour jouer automatiquement et avoir des commandes pour elle.

  • Ce n'est pas ce CSS est pour. Essayez De JavaScript...
  • Vous ne pouvez pas seulement avec CSS, vous aurez besoin de Javascript
  • Je déteste quand les sites web ne sont que...
  • Pour les gens en disant "essayez de/besoin d '/JavaScript": Pourquoi avez-vous "besoin de JavaScript"? Comment peut-on "JavaScript" pour cela? Où dans la spécification ECMAScript est "audio" ou "son" défini? (Indice: Ce n'est pas le cas. Quelque chose de plus que JavaScript est nécessaire, même si il y a de belles bibliothèques JavaScript qui sont des wrappers pour des mécanismes de la lecture de l'audio.)
InformationsquelleAutor Evan H. | 2012-08-24
  1. 6

    De la musique, c'est le contenu. CSS est de la présentation, pas de contenu.

    Vous pouvez intégrer de l'audio en HTML:

    <audio src="path/to/song.mp3" controls autoplay></audio>

    Cela est minime, bien que, de sorte qu'il ne fonctionne pas dans Firefox, par exemple, puisqu'il ne prend pas en charge le format MP3. Il ya des tutoriels pour cette.

    • Comme je l'ai dit, que même balise fonctionne parfaitement bien dans Firefox, si vous encoder le fichier en tant que "chanson.ogg"
    • Je pense que l'on pourrait faire valoir que la musique peut être utilisé comme présentation (comme arrière-plan de la musique d'ambiance peut être plus de "contenu" que d'une image d'arrière-plan). Cependant, CSS couvre les aspects de l'affichage de la présentation que, donc..
    • Effectivement CSS peut être utilisé pour définir la façon dont les lecteurs d'écran devrait lire des trucs, il est donc utilisé pour l'audio dans une certaine mesure... pas comme cela.
    InformationsquelleAutor Niet the Dark Absol
  2. 4

    Vous pouvez utiliser la balise html5 audio, prise de ici , notez quels sont les navigateurs pris en charge.

    <audio controls="controls" autoplay>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>

    Si vous avez besoin de soutien IE8 et au-dessous de considérer l'utilisation de jplayer qui a des flash de secours quand le html5 audio n'est pas pris en charge.

    InformationsquelleAutor tsukimi
  3. 2

    Comme d'autres l'ont souligné, ce n'est pas possible nativement avec les CSS. Vos seules options sont HTML5, JavaScript, des Applets ou 3ème partie des technologies comme Flash et SilverLight. Toutefois, chacune de ces options ont leurs propres mises en garde et les défauts.

    1. HTML5 n'est pas entièrement pris en charge par tous les navigateurs, et fera en sorte que votre page /site n'ayant pas un non-conforme à l'expérience - qui vous ne le voudriez pas.

    2. Javascript est probablement votre meilleur pari qu'il est pour la plupart des navigateurs à l'exception seulement du texte browers, ou très lite navigateurs (que vous pouvez trouver sur certains la première génération de téléphones portables).

    3. Applets est un peut de vers en eux-mêmes que vous aurez à traiter avec un autre langage de programmation (et toutes ses nuances), ainsi que la horriblement ennuyeux question de vos utilisateurs d'avoir à activer l'applet à chaque fois qu'ils visitent ou actualiser la page.

    4. Flash ou Silverlight est une autre alternative prometteuse, car ils peuvent s'exécuter dans n'importe quel navigateur - à condition que le système d'exploitation prend en charge. Cependant, les visiteurs de votre site /page doivent avoir que le plugin installé et activé. Si vous avez décidé d'aller dans cette voie, Flash est la meilleure option, car presque chaque ordinateur et système d'exploitation fonctionne et prend en charge. Cependant, une chose à noter est que de la fin (5 dernières années), Adobe a eu quelques problèmes de sécurité avec Flash.

    Donc, ma suggestion serait:

    1. Javascript particulièrement Jquery.

    2. HTML5 si vous pouvez - mais pris en charge par Javascript comme une sauvegarde. Exemple: http://css-tricks.com/play-sound-on-hover/

    3. Flash /SilverLight et des technologies similaires.

    4. Applets

    Et pour un méli-mélo de façons possibles de faire cela, vous pouvez visiter ce lien: Une belle collection de départ est celui-ci: http://iapdesign.com/webdev/25-awesome-html5-and-jquery-plugin-music-player/

    • Comment "le son dans le JavaScript" travail sans, l'une des autres options? Où est jQuery.playSound? Et, en supposant que l'utilisation correcte de "son plugin", comment aurait - il?
    • Convenu @pst. Il n'y a pas un pur natif JavaScript / jQuery plugin.
    InformationsquelleAutor jrd1
  4. 1

    Je pense que si il n'y a pas de code css. essayez d'utiliser ce code html

    HTML:

    <audio controls="controls" autoplay>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>

    InformationsquelleAutor Edwards
  5. 1

    J'ai un Gif qui joue sur le vol stationnaire à l'aide de CSS. J'ai le fichier MP3 pour correspondre à l'animation Gif. Certains de code à ajouter dans le CSS hover section qui déclencherait le fichier audio dans le code HTML que vous avez de sorte qu'ils jouent en même temps?

    CSS:

    .animation:hover {
  cursor: pointer;
  background: url('my_animation.gif'), url('Background.jpg');
 **ADD some code here to trigger my_sound.mp3**
}

    HTML:

    <audio autoplay>
  <source src="my_sound.mp3" type="audio/mp3" />
</audio>
    InformationsquelleAutor Robert