Code HTML, CSS et JS (audio)

Fermé

JumperMan - Modifié le 19 mars 2023 à 13:16
Antgui - 27 mars 2023 à 01:47

Bonjour, en ce moment j'apprend l'HTML donc aussi le CSS et le JS

j'ai codé un programme assez simple pour apprendre mais le problème c'est que je galère sur un point : je n'arrive pas a lire un fichier audio.

mon site est structuré de cette façon :

Site : Page d'accueil (index) ---> sous-site

le code du site ressemble a ca :

site :

index :

index.html :

<!DOCTYPE html>

<html>

    <head>

        <title>TEST - index</title>

        <base href="file:///[la ou est le fichier]">

        <link rel="stylesheet" href="index.css"/>

        <script src="index.js"></script>

    </head>

    <body>

<p class="i-aaa"> test</p>

<div>

    <button onclick="window.location.href='sous-site/sous-site.html'"> go vers bonjour</button>

</div>

    </body>

</html>

index.css :

i-aaa {

    font-size: 10px;

    color: #000;

}

Sous-site :

sous-site.html :

<!DOCTYPE html>

<html>

    <head>

        <title>TEST - bonjour</title>

        <base href="file:///[la ou est le fichier]/">

        <link rel="stylesheet" href="sous-site.css"/>

        <script src="sous-site.js"></script>

    </head>

    <body>

        <p class="ss-aab">BONJOUR</p>

        <div>

            <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />

            <script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>

            <button onclick="playaudio('music')">Clique ici pour écouter de la musique</button>

            <audio id="music" src="[la ou est le fichier]\audio.mp3"></audio>

        </div>

        <div>

            <button class="ss-aaa" onclick="window.location.href='index/index.html'">Go vers bonjour</button>

        </div>

    </body>

</html>

sous-site.css

.ss-aaa {

    background-color: black;

    color: white;

    border-radius: 4px;

}

.ss-aab {

    font-size: 10px;

    color: aqua;

    background-color: chartreuse;

}

sous-site.js

function playaudio(music) {

    var audio = document.getElementById(music);

    audio.play();

}

Autre :
audio.mp3

Désoler si comme ca c'est un peu le bordel mais j'ai pas trouvé d'autre solutions autre que vous donner un accès direct au fichier, j'utilise personnellement Visual Studio Code et de mon point de vue j'arrive a comprendre.

est-ce que vous pouvez m'aider a lire le son "audio.mp3" quand je clique sur le bouton dans le sous-site ?

merci.

***** Pour poster un code utiliser les balises.

A voir également:

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38453 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 14 mars 2025 4 740
19 mars 2023 à 19:30

Bonjour,

Ton fichier audio.mp3 se trouve t'il dans le même dossier ou un sous-dossier de la page dans laquelle tu essais d'y faire appel ?

As tu regardé dans la console de ton navigateur si il n'y avait pas des erreurs ? ( peux tu nous en faire une capture écran après avoir cliqué sur ton bouton ... pour nous montrer ce qu'elle te retourne ? )

Peux tu, si le fichier est bien dans le même dossier (ou un sous dossier) utiliser simplement un lien relatif et retirer ta balise <base> ?

A noter que tu dois utiliser des slash ( / ) dans tes chemins et non des anti-slash ( \ )

JumperMan
21 mars 2023 à 14:13

Yes, le fichier audio se trouve bien dans le meme dossier contenant le site, il est dans un sous-dossier mais avant que je le mette dans ce sous-dosser j'avais le meme problème.

Mon navigateur ne me site quelques erreurs donc j'ai pris une capture d'écran mais je n'arrive pas a la mettre, je resterais un peu plus tard.

Je vais essayer sans la balise <base> dans le sous-site.html

Merci pour les / et \ je ne savais pas.

Merci beaucoup pour ton aide

Antgui > JumperMan
22 mars 2023 à 18:23

Salut, mieux qu'un capture d'écran il suffit de copier coller le texte de l'erreur.

Voici un exemple concret dont vous pouvez vous inspirer:

https://developer.mozilla.org/fr/docs/Web/HTML/Element/audio

Notez que vous pouvez(au moins pour tester) vous passer d'un bouton en affichant simplement les commandes du lecteur audio avec l'attribut HMTL controls.

Une autre bonne ressource ici: https://www.w3schools.com/html/html5_audio.asp

Remarquez que l'attribut src n'est pas utilisé directement dans la balise audio mais inclus des balises "source" pour des sources laternatives ce qui est nécessaire.

Bref ici sans avoir à faire un once de programmation en n'utilisant que HTML vous pouvez très bien avoir un lecteur fonctionnel. Pour apprendre il serait mieux de commencer par cela et surtout laisser de côté l'ajout de bibliothéques (le CDN plyr.js)qui ne fera que compliquer des choses basiques et votre compréhension de celles ci. Donc avant d'utiliser JS assurez vous d'être au point au niveau HTML(le second lien d'exemple de code utilise uniquement du HTML et est la bonne façon de faire) + CSS.

ps: n'hésitez pas à faire des recherches pour trouver un cours bien fait , par exemple "apprendre audio HTML" (notez que la balise video et son API javascript fonctionne de la même manière donc un cours sur la balise video est aussi bien).

Cdt, bon travail.

JumperMan > Antgui
26 mars 2023 à 16:41

ok je vais essayer de faire ca, mais pour apprendre perso j'utilise chat gpt (je lui demande pas de coder a ma place mais bien de m'apprendre a coder) donc je vais continuer de suivre ces tutos mais je vais quand même suivre tes conseils.

Merci beaucoup

Antgui > JumperMan
Modifié le 27 mars 2023 à 01:48

Ah bin si vous demandez à un ordinateur de réfléchir à votre place vous n'apprendrez rien.

Surtout que chatGPT n'est pas exempt de dire des choses fausses à une question donnée.

Apprendre n'est pas avoir la réponse mais comprendre et appliquer une réponse. Dans les technologies informatique(comme le web et la programmation) c'est le raisonnement qui compte car il n'y a pas une seule réponse et que cela dépends de différents paramètres qu'il faut savoir prendre en compte et qui doivent être appris et compris.

Bref si vous déléguez la raisonnement à une IA celui ci peut-être faux car la question est probablement mal posée(poser une question vague sur un sujet général omet de prendre en compte certaines choses qu'il faut savoir). Il est indispensble de savoir chercher par soi même et savoir où et comment chercher par vous-même(ainsi d'affiner les détails que vous n'avez pas encore). Ma réponse vous donnait des pistes dans ce sens(ex: le lien vers le manuel officiel du consortium web). A vous de voir.

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

Cheval de Troie JS/Kryptik.I

'JS/Agent.TS' Qu'est ce que c'est ?

javascript arrondi après la virgule

Arrondir nombre Math.round