Intégrer un fichier son sur une page html
stereaux
Messages postés
2
Statut
Membre
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour à tous & à toutes!
je souhaite intégrer un fichier son sur une page d'accueil de site internet en construction.
qu'elles sont les balises svp?
bien à vous
sté
je souhaite intégrer un fichier son sur une page d'accueil de site internet en construction.
qu'elles sont les balises svp?
bien à vous
sté
2 réponses
-
Salut,
En html5, c'est la balise <audio> :<audio controls> <source src="musique/blabla.wav" /> <p class="warning">Veuillez mettre à jour votre navigateur</p> </audio>
Le nom du fichier est à mettre en .wav ou en .ogg ou en .mp3 (préférer le .ogg).
A la place de "veuillez mettre à ..." qui s'affiche sur les navigateur ne reconnaissant pas le html5, on peut mettre un lecteur flash : http://www.dewplayer.fr (par exemple)
Amicalement.
-
-
Attributs de la balise <audio>
controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. Cela peut sembler indispensable, et vous vous demandez peut-être pourquoi cela n'y figure pas par défaut, mais certains sites web préfèrent créer eux-mêmes leurs propres boutons et commander la lecture avec du JavaScript.
width : pour modifier la largeur de l'outil de lecture audio.
loop : la musique sera jouée en boucle.
autoplay : la musique sera jouée dès le chargement de la page. Évitez d'en abuser, c'est en général irritant d'arriver sur un site qui joue de la musique tout seul !
preload : indique si la musique peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs :
auto (par défaut) : le navigateur décide s'il doit précharger toute la musique, uniquement les métadonnées ou rien du tout.
metadata : charge uniquement les métadonnées (durée, etc.).
none : pas de préchargement. Utile si vous ne voulez pas gaspiller de bande passante sur votre site. -
J'avoue que votre réponse ne m'amène pas la solution... que dois-je ajouter dans le code ?
Voici le code complet de la page, la balise audi est à partir de la ligne 271... je bosse avec Dreamweaver CS4 ou Frontpage...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" media="all" type="text/css" href="style.css">
<title>Présentation de la bodeguita</title>
<script language="JavaScript">
<!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
</head><body onload="FP_preloadImgs(/*url*/'boutons/buttonB.jpg', /*url*/'boutons/buttonC.jpg', /*url*/'boutons/button23.jpg', /*url*/'boutons/button24.jpg')">
<div class="site">
<div class="header" style="width: 800px; height: 65px">
<font size="5">
<img border="0" src="./images/logo-ccd.gif" width="80" height="60" align="middle">
</font><font style="font-size: 20pt">Choeur d'Hommes du Cercle Choral
Dacquois </font><font size="5">
<img border="0" src="./images/logo-cantadores.gif" width="80" height="60" align="middle"></font><br>
</div>
<div class="clean"></div>
<div class="menu_h">
<ul class="menu_h_list">
<li>
<font face="Comic Sans MS" size="4" style="background-repeat: no-repeat">
<a style="background-repeat: no-repeat" href="sommaire.html">
Accueil</a></font></li>
<li><font face="Comic Sans MS" size="4">
<a href="contacts.html">Contact</a></font></li>
<li><font face="Comic Sans MS" size="4"><a href="liens.html">
Liens</a></font></li>
<li><font face="Comic Sans MS" size="4">
<a target="_blank" href="http://users2.smartgb.com/g/g.php?a=s&i=g25-45490-72">
Livre d'or</a></font></li>
<li><font face="Comic Sans MS" size="4">
<a href="espace_choriste/prive_index.html">Espace choristes</a></font></li>
</ul>
</div><div class="clean"></div>
<div class="menu_v">
<div class="menu_v_top"><font face="Comic Sans MS" size="2">
Présentation</font></div>
<div class="menu_v_ctn">
<font face="Comic Sans MS" size="2"><a href="histoire.html">Historique</a><br>
<a href="le_chef_de_choeur.html">Le chef de choeur</a><br>
<a href="les_dirigeants.html">Le Conseil d'administration</a><br>
<a href="les_premiers_tenors.html">Les premiers ténors</a><br>
<a href="les_seconds_tenors.html">Les seconds ténors</a><br>
<a href="les_barytons.html">Les barytons</a><br>
<a href="les_basses.html">Les basses</a><br>
<a href="presse.html">Revue de presse</a></font></div>
<div class="menu_v_top"><font face="Comic Sans MS" size="2">
Prestations</font></div>
<div class="menu_v_ctn">
<font face="Comic Sans MS" size="2"><a href="prestations.html">Nos prestations</a><br>
<a href="calendrier.html">Calendrier</a><br>
<a href="repertoire.html">Répertoire</a><br>
<a href="calendriers-precedents.html">Années précédentes</a> </font>
</div>
<div class="menu_v_top"><font face="Comic Sans MS" size="2">
Discographie</font></div>
<div class="menu_v_ctn">
<font face="Comic Sans MS" size="2"><a href="discographie.html">Nos CD</a><br>
<a href="cd1.html">Extraits musicaux CD n°1</a><br>
<a href="cd2.html">Extraits musicaux CD n°2</a><br>
<a href="cd3.html">Extraits musicaux CD n°3</a><br>
<a href="cd4.html">Extraits musicaux CD n°4</a><br>
<a href="cd5.html">Extraits musicaux CD n°5</a><br>
<a href="cd6.html">Extraits musicaux CD n°6</a><br>
<a href="cd7.html">Extraits musicaux CD n°7</a><br>
<a href="cd8.html">Extraits musicaux CD n°8</a><br>
<a href="cd9.html">Extraits musicaux CD n°9</a><br>
<a href="dvd1.html">Extraits musicaux DVD n°1</a> </font>
</div>
<div class="menu_v_top"><font face="Comic Sans MS" size="2">Festival
Entre Voix</font></div>
<div class="menu_v_ctn">
<font face="Comic Sans MS" size="2"><a href="festival.html">
Programme du Festival </a><br>
<a href="festivals-precedents.html">Années précédentes</a><br>
<a href="sponsors-festival.html">Nos partenaires</a> </font>
</div>
<div class="menu_v_top"><font face="Comic Sans MS" size="2">
Bodeguita des cantadores</font></div>
<div class="menu_v_ctn">
<font face="Comic Sans MS" size="2">
<a href="acces.bodeguita.html">Accès</a><br>
<a href="bodeguita.html">Présentation</a><br>
<a href="avis-public.html">L'avis du public</a><br>
<a href="chants.html">Téléchargez nos chants</a><br>
<a href="sponsors-bodeguita.html">Nos partenaires</a>
</font>
</div>
<div class="menu_v_top"><font face="Comic Sans MS" size="2">Divers</font></div>
<div class="menu_v_ctn">
<font face="Comic Sans MS" size="2">
<a href="or.html">Ancien livre d'or</a><br>
<a href="mentions-legales.html">Mentions légales</a></font></div>
</div>
<div class="corp">
<div class="corp_top"></div>
<div class="corp_ctn">
<div align="center">
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
<tbody><tr>
<td>
<p align="center">
<font face="Comic Sans MS">Los
cantadores soutiennent
<a target="_blank" href="http://www.ken-back.net/">
<img border="0" src="images/pages/cantadores/ken-back.jpg" width="86" height="60" align="middle"></a></font></p></td>
</tr>
<tr>
<td>
<p align="center">
</p><p align="center">
<font face="Comic Sans MS" style="font-size: 16pt" color="#FF0000">
Venez nous retrouver <br>
place Roger Ducos<br>
</font></p><p align="center">
<img border="0" src="images/pages/cantadores/info-bodeguita_2014.jpg" width="480" height="320"></p></td>
</tr>
</tbody></table><!-- DEBUT DU SCRIPT CARROUSEL -->
<!-- Script provenant de http://www.toulouse-renaissance.net/bach-flowers/ --><script type="text/javascript">
/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************
PARAMETRES DE REGLAGE
***********************************************/
// Spécifiez la largeur du diaporama (en pixel)
var sliderwidth="530px"
// Spécifiez la hauteur du diaporama (en pixel)
var sliderheight="180px"
// Spécifiez la vitesse de défilement (de 1 à 10)
var slidespeed=1
// Spécifiez la couleur du fond
slidebgcolor="#EAEAEA"
// SPECIFICATIONS DU CARROUSEL : chemin des images
// Vous pouvez rendre l'image cliquable
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a nohref=""><img src="./images/pages/cantadores/a1.jpg" border=1></a>'
leftrightslide[1]='<a nohref="http://www.deuxieme-lien.fr/"><img src="./images/pages/cantadores/a2.jpg" border=1></a>'
leftrightslide[2]='<a nohref="http://troisieme-lien.org/"><img src="./images/pages/cantadores/a3.jpg" border=1></a>'
leftrightslide[3]='<a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a4.jpg" border=1></a>'
leftrightslide[4]='<a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a5.jpg" border=1></a>'
leftrightslide[5]='<a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a6.jpg" border=1></a>'
leftrightslide[6]='<a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a7.jpg" border=1></a>'
leftrightslide[7]='<a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a8.jpg" border=1></a>'
leftrightslide[8]='<a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a9.jpg" border=1></a>'
leftrightslide[9]='<a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a10.jpg" border=1></a>'
// Spécifiez l'espace entre chaque image (se servir du HTML):
var imagegap=" "
// Spécifiez le nombre de pixels/espace entre chaque rotation du carrousel (nombre entier)
var slideshowgap=45
////NE RIEN EDITER A PARTIR D'ICI////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="8" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:30px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script><span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px"><nobr><a nohref=""><img src="./images/pages/cantadores/a1.jpg" border="1"></a> <a nohref="http://www.deuxieme-lien.fr/"><img src="./images/pages/cantadores/a2.jpg" border="1"></a> <a nohref="http://troisieme-lien.org/"><img src="./images/pages/cantadores/a3.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a4.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a5.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a6.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a7.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a8.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a9.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a10.jpg" border="1"></a></nobr></span><table border="8" cellspacing="0" cellpadding="0"><tbody><tr><td><div style="position:relative;width:530px;height:180px;overflow:hidden"><div style="position:absolute;width:530px;height:180px;background-color:#EAEAEA" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed"><div id="test2" style="position:absolute;left:30px;top:0px"><nobr><a nohref=""><img src="./images/pages/cantadores/a1.jpg" border="1"></a> <a nohref="http://www.deuxieme-lien.fr/"><img src="./images/pages/cantadores/a2.jpg" border="1"></a> <a nohref="http://troisieme-lien.org/"><img src="./images/pages/cantadores/a3.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a4.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a5.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a6.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a7.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a8.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a9.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a10.jpg" border="1"></a></nobr></div><div id="test3" style="position: absolute; top: 0px; left: 2513px; "><nobr><a nohref=""><img src="./images/pages/cantadores/a1.jpg" border="1"></a> <a nohref="http://www.deuxieme-lien.fr/"><img src="./images/pages/cantadores/a2.jpg" border="1"></a> <a nohref="http://troisieme-lien.org/"><img src="./images/pages/cantadores/a3.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a4.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a5.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a6.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a7.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a8.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a9.jpg" border="1"></a> <a nohref="http://enieme-lien.net/"><img src="./images/pages/cantadores/a10.jpg" border="1"></a></nobr></div></div></div></td></tr></tbody></table>
<p style="margin-top: 0; margin-bottom: 0">
<a href="videos-bodeguita.html">
<img border="0" id="img1" src="boutons/buttonA.jpg" height="20" width="60" alt="Vidéos" fp-style="fp-btn: Border Left 1; fp-proportional: 0" fp-title="Vidéos" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'boutons/buttonB.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'boutons/buttonA.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'boutons/buttonC.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'boutons/buttonB.jpg')"></a>
<a href="photos-bodeguita.html">
<img border="0" id="img2" src="boutons/button22.jpg" height="20" width="60" alt="Photos" fp-style="fp-btn: Border Left 1; fp-proportional: 0" fp-title="Photos" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'boutons/button23.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'boutons/button22.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'boutons/button24.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'boutons/button23.jpg')"></a></p>
</div>
<p style="margin-top: 0; margin-bottom: 0" align="left">
<audio controls="">
<source src="son/cantadores/los-cantadores.mp3">
</source></audio></p>
<div align="center">
<table border="0" width="99%" id="table2">
<tbody><tr>
<td>
<p align="center"><label id="Compte">La bodeguita a fermé ses portes... rendez-vous en 2015</label>
<font size="4" face="Comic Sans MS">
<script type="text/JavaScript">
var Affiche=document.getElementById("Compte");
function Rebour() {
var date1 = new Date();
var date2 = new Date ("Aug 13 21:00:00 2014"); // Date et heure de l'événement
var sec = (date2 - date1) / 1000; // Temps donné en millièmes de seconde
var n = 24 * 3600; //nombre de secondes dans un jour
if (sec > 0) {
j = Math.floor (sec / n);
h = Math.floor ((sec - (j * n)) / 3600);
mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
Affiche.innerHTML = "Temps restant avant l'ouverture de la bodeguita 2014 : " + j +" jours, "+ h +" h "+ mn +" min et "+ sec + " sec ";
window.status = "Temps restant : " + j +" jours, "+ h +" h "+ mn +" min et "+ sec + " sec ";
}
else if (Math.abs(sec) < (5 * n)) { // Durée de l'événement
Affiche.innerHTML = "La bodeguita est ouverte, venez nous rejoindre";
window.status = "La bodeguita est ouverte, venez nous rejoindre";
}
else {
Affiche.innerHTML = "La bodeguita a fermé ses portes... rendez-vous en 2015";
window.status = "La bodeguita a fermé ses portes... rendez-vous en 2015";
}
tRebour=setTimeout ("Rebour();", 1000);
}
Rebour();
</script></font></p></td>
</tr>
</tbody></table>
</div>
</div>
<div class="corp_bottom"></div>
</div>
<div class="clean"></div>
<div class="foot">
<font face="Tahoma" size="2">
<span>
<a href="http://validator.w3.org/check?uri=referer">
<font color="#FFFFFF">Valide (X)html strict 1.0</font></a><font color="#FFFFFF"> |
</font> <a href="http://jigsaw.w3.org/css-validator/check/referer">
<font color="#FFFFFF">Valide Css 2.1</font></a><font color="#FFFFFF"> |
</font>
</span><font color="#ffffff">Tous droits réservés ©</font><font color="white">2010
Choeur d'Hommes du Cercle Choral Dacquois</font></font><span>
</span>
</div>
</div>
</body></html> -
-
-
Merci pour la promptitude de votre réponse!
je vais expérimenter les infos communiqués.
merci & bien à vous
stereaux
