web-dev-qa-db-fra.com

Lecture automatique d'un fichier audio avec une balise incorporée HTML5 lorsque le lecteur est invisible

Je veux lire automatiquement un fichier audio MP3 et je ne veux pas que le lecteur soit visible.

<div id="music"><embed src="Comfortably Numb.mp3" autostart=true loop=false></div>

Lorsque j'ai ajouté display:none à la balise audio à l'aide de CSS, la lecture de la musique est totalement interrompue .. Quelqu'un pourrait-il m'expliquer de jouer de la musique sans afficher le lecteur?

htmlhtml5audiomp3autoplay
6
Nima

Sinon, vous pouvez essayer la chose de base pour répondre à vos besoins,

<audio autoplay loop>
      <source src="johann_sebastian_bach_air.mp3">
</audio>

Pour plus de références cliquez ici

16
Vinith

Si vous utilisez React, assurez-vous que la lecture automatique est définie sur,

autoPlay

Réagir veut que ce soit camelcase!

3
Dan Zuzevich

J'ai utilisé ce code,

 <div style="visibility:hidden">
    <audio autoplay loop>
        <source src="Aakaasam-Yemaaya Chesave.mp3">
    </audio> 
</div>

Cela fonctionne bien mais je veux arrêter et mettre en pause le bouton. Nous pouvons donc arrêter si nous ne voulons pas écouter.

1
Satya

Parfois, la lecture automatique est nécessaire. Quelqu'un a déjà souligné que la célèbre Les Paul Google Doodle (2011) nécessitait une lecture automatique, même si le son ne jouait pas jusqu'à ce que vous passiez la souris sur les cordes de guitare. Si c'est fait avec de la classe et un beau design, ça peut être beau (surtout des sites de cinéma avec un design immersif)

1
Z Kubota

Pour toute référence future aux personnes qui trouveront cette page plus tard, vous pouvez utiliser:

<audio controls autoplay loop hidden>
<source src="kooche.mp3" type="audio/mpeg">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
0
Jexla

Vous pouvez utiliser ce code, ça marche avec moi

<div style="visibility:hidden">
    <audio autoplay loop>
        <source src="../audio/audio.mp3">
    </audio> 
</div>
0
Moustafa Emad Sobhy
<div id="music">
<audio autoplay>
  <source src="kooche.mp3" type="audio/mpeg">
  <p>If you can read this, your browser does not support the audio element.</p>
</audio>
</div>

Et le css:

#music {
  display:none;
}

Comme suggéré ci-dessus, les contrôles devraient probablement être disponibles sous une forme ou une autre. Utilisez peut-être une bascule lien/case à cocher qui fait glisser les contrôles via jquery. 

Source: Lecture audio HTML5

0
Studio3