Partage
  • Partager sur Facebook
  • Partager sur Twitter

HTML et JAVASCRIPT

DavidMarquant3
    22 juin 2021 à 18:48:31

    Bonjour à toutes et à tous, 

    Dans un premier temps je m'excuse si ce que je poste n'est pas conforme aux règles du forum, que j'ai lu !

    S'il y a un problème dite le moi j'essayerais de modifier ma demande...

    JE SUIS UN VRAI, VRAI DEBUTANT QUI BIDOUILLE ET QUI NE COMPREND MÊME PAS PARFOIS CE QU'IL ECRIT...

    Voici le PROJET et mon PROBLEME :

    Je désire créer une petite application (site) par la suite sur mobile pour donner la parole à des marionnette afin de réaliser des animations pour les enfants malade (je ne suis pas ventriloque) et donc ce système permettrais de faire parler les marionnettes...

    Voici le code en entier :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
    <title>HORTENSE</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<style type="text/css" media="all">
	body
	{
		margin			: 0;
		background		: #fee3ff fixed;
	}

	#fixe
	{
	    background      : #f86bff;
	    height          : 238px;
	    border-bottom   : 2px solid #d07171;
		position		: fixed;
		top				: 0;
		width			: 100%;
	}

	#fixe p
	{
	    margin          : 0;
	}

	#content
	{
		margin-top		: 280px;
	}
	.bouton2 {
	background-color: lightgrey;
	border: none;
	color: black;
	margin: 10px;
	padding: 8px;
	border-radius: 10px;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	font-size: 10px;
	cursor: pointer;
	}
	.bouton2:hover {
	background-color: #B0F2B6;
	color: black;
	}
	</style>
</head>

<body>

<div id="fixe">
    
			<style="background-color:black;">
			<font color="#000000">
			<center>
			<img src="Autruche-3.png" />
			<h2>HORTENSE</h2><i>							
			<h5>La belle est capricieuse autruche</h5>
			</i>
				<hr color="#3ff731" size="3">
			    <div class="row">
				
				<!--
				<button class="bouton1" onclick=""id="buttona">C - Classiques</button>
                <button class="bouton1" onclick="" id="buttonb">? - Questions</button>
                <button class="bouton1" onclick="" id="buttonc">! - Affirmations</button>
				<button class="bouton1" onclick="" id="buttond">♫ - Sons</button>
                <button class="bouton1" onclick="" id="buttone">E - Expressions</button>
                <button class="bouton1" onclick="" id="buttonf">M - Morales</button>
				<button class="bouton1" onclick="" id="buttong">S - Spéciaux</button>
                <button class="bouton1" onclick="" id="buttonh">H - Histoires</button>
				<button class="bouton1" onclick="" id="buttoni">D - Devinettes</button>
				<button class="bouton1" onclick="" id="buttonj">B - Blagues</button>
                <button class="bouton1" onclick="" id="buttonk">CD - Musiques</button>
				<button class="bouton1" onclick="" id="buttonl">@ - Scénarios</button>
				-->
				
				<a href="#Classiques" style="text-decoration:none"> Classiques       </a> 
				<a href="#Questions" style="text-decoration:none"> Questions      </a>
				<a href="#Affirmations" style="text-decoration:none"> Affirmations      </a>
				<a href="#Sons" style="text-decoration:none"> Sons      </a>
				<a href="#Expressions" style="text-decoration:none"> Expressions      </a>
				<a href="#Morales" style="text-decoration:none"> Morales      </a>
				<a href="#Spéciaux" style="text-decoration:none"> Spéciaux      </a>
				<a href="#Histoires" style="text-decoration:none"> Histoires      </a>
				<a href="#Devinettes" style="text-decoration:none"> Devinettes      </a>
				<a href="#Blagues" style="text-decoration:none"> Blagues      </a>
				<a href="#Musiques" style="text-decoration:none"> Musiques      </a>
				<a href="#Scenarios" style="text-decoration:none"> Scénarios      </a>
				<hr color="#3ff731" size="3">
			    <div class="row">
				</center>
</div>

<div id="content">
	
				<center>
				<audio id="audioPlayer1">
					<source src="David-sons/OUI.m4a">
                </audio>
				<audio id="audioPlayer2">
                    <source src="David-sons/Ouai.m4a">
                </audio>
                <audio id="audioPlayer3">
                    <source src="David-sons/Ouiii.m4a">
                </audio>
                <audio id="audioPlayer4">
                    <source src="David-sons/Yes.m4a">
                </audio>
                <audio id="audioPlayer5">
                    <source src="David-sons/Sisenior.m4a">
                </audio>
                <audio id="audioPlayer6">
                    <source src="David-sons/Non.m4a">
                </audio>
				<audio id="audioPlayer7">
                    <source src="David-sons/Nan.m4a">
                </audio>
				<audio id="audioPlayer8">
					<source src="David-sons/Nonnn.m4a">
                </audio>
				<audio id="audioPlayer9">
					<source src="David-sons/No.m4a">
                </audio>
				<audio id="audioPlayer10">
					<source src="David-sons/Nein.m4a">
                </audio>
				<audio id="audioPlayer11">
					<source src="David-sons/Bonjour.m4a">
                </audio>
				<audio id="audioPlayer12">
					<source src="David-sons/Salut.m4a">
                </audio>
				<audio id="audioPlayer13">
                    <source src="David-sons/Saluuut.m4a">
                </audio>
                <audio id="audioPlayer14">
                    <source src="David-sons/Good morning.m4a">
                </audio>
                <audio id="audioPlayer15">
                    <source src="David-sons/Hola.m4a">
                </audio>
                <audio id="audioPlayer16">
                    <source src="David-sons/Hello.m4a">
                </audio>
                <audio id="audioPlayer17">
                    <source src="David-sons/Madame.m4a">
                </audio>
				<audio id="audioPlayer18">
                    <source src="David-sons/Monsieur.m4a">
                </audio>
				<audio id="audioPlayer19">
					<source src="David-sons/Mademoiselle.m4a">
                </audio>
				<audio id="audioPlayer20">
					<source src="David-sons/Jeune homme.m4a">
                </audio>
				<audio id="audioPlayer21">
					<source src="David-sons/Mesdames.m4a">
                </audio>
				<audio id="audioPlayer22">
					<source src="David-sons/Messieurs.m4a">
                </audio>
				<audio id="audioPlayer23">
					<source src="David-sons/Messieurs dames.m4a">
                </audio>
				<audio id="audioPlayer24">
                    <source src="David-sons/Merci.m4a">
                </audio>
                <audio id="audioPlayer25">
                    <source src="David-sons/Merki.m4a">
                </audio>
                <audio id="audioPlayer26">
                    <source src="David-sons/Tank you.m4a">
                </audio>
                <audio id="audioPlayer27">
                    <source src="David-sons/Thank you so much.m4a">
                </audio>
                <audio id="audioPlayer28">
                    <source src="David-sons/Gracias.m4a">
                </audio>
				<audio id="audioPlayer29">
                    <source src="David-sons/Muchas gracias.m4a">
                </audio>
				<audio id="audioPlayer30">
					<source src="David-sons/Beaucoup.m4a">
                </audio>
				<audio id="audioPlayer31">
					<source src="David-sons/Beaucul.m4a">
                </audio>
				<audio id="audioPlayer32">
					<source src="David-sons/Bien.m4a">
                </audio>
				<audio id="audioPlayer33">
					<source src="David-sons/Du fond du coeur.m4a">
                </audio>
				<audio id="audioPlayer34">
					<source src="David-sons/OK.m4a">
                </audio>
				<audio id="audioPlayer35">
                    <source src="David-sons/Dac.m4a">
                </audio>
                <audio id="audioPlayer36">
                    <source src="David-sons/Dacodac.m4a">
                </audio>
                <audio id="audioPlayer37">
                    <source src="David-sons/Bob.m4a">
                </audio>
                <audio id="audioPlayer38">
                    <source src="David-sons/L'ami.m4a">
                </audio>
                <audio id="audioPlayer39">
                    <source src="David-sons/Michel.m4a">
                </audio>
				<audio id="audioPlayer40">
                    <source src="David-sons/Au revoir.m4a">
                </audio>
				<audio id="audioPlayer41">
					<source src="David-sons/Bonne journée.m4a">
                </audio>
				<audio id="audioPlayer42">
					<source src="David-sons/By By.m4a">
                </audio>
				<audio id="audioPlayer43">
					<source src="David-sons/Adios.m4a">
                </audio>
				<audio id="audioPlayer44">
					<source src="David-sons/Hasta la vista baby.m4a">
                </audio>
				<audio id="audioPlayer45">
                    <source src="David-sons/On reste en contacte.m4a">
                </audio>
                <audio id="audioPlayer46">
                    <source src="David-sons/On s'appelle.m4a">
                </audio>
                <audio id="audioPlayer47">
                    <source src="David-sons/Mon amour.m4a">
                </audio>
                <audio id="audioPlayer48">
                    <source src="David-sons/Beauté.m4a">
                </audio>
				<audio id="audioPlayer49">
                    <source src="David-sons/Mi amor.m4a">
                </audio>
				<audio id="audioPlayer50">
					<source src="David-sons/Mon coeur.m4a">
                </audio>
						
				
								
				<h2 id="Classiques"></h2>    
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<h2>Les classiques<h2>
                <button class="bouton2" onclick="play('audioPlayer1', this)" id="button1">OUI</button>
                <button class="bouton2" onclick="play('audioPlayer2', this)" id="button2">Ouai</button>
                <button class="bouton2" onclick="play('audioPlayer3', this)" id="button3">Ouiii</button>
				<button class="bouton2" onclick="play('audioPlayer4', this)" id="button4">Yes</button>
                <button class="bouton2" onclick="play('audioPlayer5', this)" id="button5">Si sénior</button>
				<br>
				<button class="bouton2" onclick="play('audioPlayer6', this)" id="button6">Non</button>
				<button class="bouton2" onclick="play('audioPlayer7', this)" id="button7">Nan</button>
				<button class="bouton2" onclick="play('audioPlayer8', this)" id="button8">Nonnn</button>
				<button class="bouton2" onclick="play('audioPlayer9', this)" id="button9">No</button>
				<button class="bouton2" onclick="play('audioPlayer10, this)" id="button10">Nein</button>
				<br>
				<button class="bouton2" onclick="play('audioPlayer11', this)" id="button11">Bonjour</button>
				<button class="bouton2" onclick="play('audioPlayer12', this)" id="button12">Salut</button>
				<button class="bouton2" onclick="play('audioPlayer13', this)" id="button13">Saluuut ♥♥♥</button>
				<button class="bouton2" onclick="play('audioPlayer14', this)" id="button14">Good morning</button>
				<button class="bouton2" onclick="play('audioPlayer15', this)" id="button15">Hola</button>
				<button class="bouton2" onclick="play('audioPlayer16', this)" id="button16">Hello</button>
				<br>
				<button class="bouton2" onclick="play('audioPlayer17', this)" id="button17">Madame</button>
				<button class="bouton2" onclick="play('audioPlayer18', this)" id="button18">Monsieur</button>
				<button class="bouton2" onclick="play('audioPlayer19', this)" id="button19">Mademoiselle</button>
				<button class="bouton2" onclick="play('audioPlayer20', this)" id="button20">Jeune Homme</button>
				<button class="bouton2" onclick="play('audioPlayer21', this)" id="button21">Mesdames</button>
				<button class="bouton2" onclick="play('audioPlayer22', this)" id="button22">Messieurs</button>
				<button class="bouton2" onclick="play('audioPlayer23', this)" id="button23">Messieurs Dames</button>
				<br>
				<button class="bouton2" onclick="play('audioPlayer24', this)" id="button24">Merci</button>
				<button class="bouton2" onclick="play('audioPlayer25', this)" id="button25">Merki</button>
				<button class="bouton2" onclick="play('audioPlayer26', this)" id="button26">Tahk you</button>
				<button class="bouton2" onclick="play('audioPlayer27', this)" id="button27">Thank you so much</button>
				<button class="bouton2" onclick="play('audioPlayer28', this)" id="button28">Gracias</button>
				<button class="bouton2" onclick="play('audioPlayer29', this)" id="button29">Muchas gracias</button>
				<button class="bouton2" onclick="play('audioPlayer30', this)" id="button30">Beaucoup</button>
				<button class="bouton2" onclick="play('audioPlayer31', this)" id="button31">Beaucul</button>
				<button class="bouton2" onclick="play('audioPlayer32', this)" id="button32">Bien</button>
				<button class="bouton2" onclick="play('audioPlayer33', this)" id="button33">Du fond du coeur</button>
				<br>
				<button class="bouton2" onclick="play('audioPlayer34', this)" id="button34">OK</button>
				<button class="bouton2" onclick="play('audioPlayer35', this)" id="button35">Dac</button>
				<button class="bouton2" onclick="play('audioPlayer36', this)" id="button36">Dacodac</button>
				<button class="bouton2" onclick="play('audioPlayer37', this)" id="button37">Bob !</button>
				<button class="bouton2" onclick="play('audioPlayer38', this)" id="button38">L'ami !</button>
				<button class="bouton2" onclick="play('audioPlayer39', this)" id="button39">Michel !</button>
				<br>
				<button class="bouton2" onclick="play('audioPlayer40', this)" id="button40">Au revoir</button>
				<button class="bouton2" onclick="play('audioPlayer41', this)" id="button41">Bonne journée</button>
				<button class="bouton2" onclick="play('audioPlayer42', this)" id="button42">By By</button>
				<button class="bouton2" onclick="play('audioPlayer43', this)" id="button43">Adios</button>
				<button class="bouton2" onclick="play('audioPlayer44', this)" id="button44">Hasta la vista baby</button>
				<br>
				<button class="bouton2" onclick="play('audioPlayer45', this)" id="button45">On reste en contacte</button>
				<button class="bouton2" onclick="play('audioPlayer46', this)" id="button46">On s'appelle</button>
				<button class="bouton2" onclick="play('audioPlayer47', this)" id="button47">Mon amour</button>
				<button class="bouton2" onclick="play('audioPlayer48', this)" id="button48">Beauté</button>
				<button class="bouton2" onclick="play('audioPlayer49', this)" id="button49">Mi amor</button>
				<button class="bouton2" onclick="play('audioPlayer50', this)" id="button50">Mon coeur</button>
				
				<h2 id="Questions"></h2>   
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<h2>Les questions<h2>
				
				<h2 id="Affirmations"></h2>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<h2>Les affirmations<h2>			
								
				<h2 id="Sons"></h2>   
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<h2>Les sons<h2>
				
				<h2 id="Expressions"></h2>   
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<h2>Les expressions<h2>
				
				<h2 id="Morales"></h2>   
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<h2>Les morales<h2>
				
				<h2 id="Spéciaux"></h2> 
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<h2>Les spéciaux<h2>
				
				<h2 id="Histoires"></h2>  
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<h2>Les histoires<h2>		
				
				<h2 id="Devinettes"></h2>   
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<h2>Les devienttes<h2>
				
				<h2 id="Blagues"></h2>  
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<h2>Les blagues<h2>
				
				<h2 id="Musiques"></h2>   
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<h2>Les musiques<h2>
				
				<h2 id="Scenarios"></h2>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<h2>Les scénarios<h2>
			
    
    <script type="text/javascript">
  
        function play(idPlayer, control) {
            var player = document.querySelector('#' + idPlayer);
            var nbButton = 11; // Nombre de bouton et de player
         
            if (player.paused) {
                // stopper tous les sons 
                for( i=1; i < nbButton+1 ; i++ ) {
                    var namePlayer = idPlayer.substring(0,idPlayer.length-1)
                    stopPlayer = document.querySelector('#' + namePlayer + i);
                    stopPlayer.currentTime = 0;
                    stopPlayer.pause();
                             
                    var idButton = document.getElementById('button' + i);
                    <!--idButton.innerHTML = 'Play';-->
                }
                 
                player.play();
                player.currentTime = 0;
                <!--control.textContent = 'Stop';-->
            } else  {
                player.pause();
                <!--control.textContent = 'Play'; --> 
            }
        }
	</script>

</div>
<video width=320  height=240 controls poster="Hed le Zèbre.JPG">
  <source src="Générique Viedepros.mp4" type="video/mp4">
</video>

</center>
	
	
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3007058-1");
pageTracker._trackPageview();
</script>
</body>
</html>

    LE PROBLEME :

    En faite j'affecte différent fichier son à des fonction : <audio id="audioPlayer1"> 2,3,4,5,6,...

    Je créer des boutons....qui lance avec le "onclick" un fichier son.

    Mais seul les fichiers de 1 à 9 fonctionne...des que j'arrive sur le 10 plus rien !

    Je pense qu'il y a un problème dans cette section de code ??? ci-dessous

    <script type="text/javascript">
  
        function play(idPlayer, control) {
            var player = document.querySelector('#' + idPlayer);
            var nbButton = 11; // Nombre de bouton et de player
         
            if (player.paused) {
                // stopper tous les sons 
                for( i=1; i < nbButton+1 ; i++ ) {
                    var namePlayer = idPlayer.substring(0,idPlayer.length-1)
                    stopPlayer = document.querySelector('#' + namePlayer + i);
                    stopPlayer.currentTime = 0;
                    stopPlayer.pause();
                             
                    var idButton = document.getElementById('button' + i);
                    <!--idButton.innerHTML = 'Play';-->
                }
                 
                player.play();
                player.currentTime = 0;
                <!--control.textContent = 'Stop';-->
            } else  {
                player.pause();
                <!--control.textContent = 'Play'; --> 
            }
        }
	</script>


    Ci dessous un imprime écran :

    IMPRIM ECRAN

    Merci d'avance pour tous ceux qui auront la gentillesse de donner un peu de leur vie (temps) pour m'aider à modifier ce code pour qu'il fonctionne.

    Attention je suis totalement néofite...

    Cordialement.

    David.



    • Partager sur Facebook
    • Partager sur Twitter

    HTML et JAVASCRIPT

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur ●
    • Markdown