Musique sur site web + boutons [Résolu/Fermé]

Signaler
Messages postés
25
Date d'inscription
jeudi 4 août 2011
Statut
Membre
Dernière intervention
30 mai 2015
-
Messages postés
18564
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
11 juin 2021
-
Bonjour,
Voilà, je suis en train de créer un site web perso avec iWeb et je voudrais rajouter du son sur ma page d'accueil avec possibilité de l'arrêter ou de modifier le volume à partir de 3 boutons (1 volume -, 1 volume +, et un play/pause)

Le but serait d'intégrer le son dans le site web en faisant disparaitre l'interface de lecture initiale pour la remplacer par les 3 boutons que je créerais via photoshop.

Je suppose que je devrai passer par du javascript ou du html mais je ne m'y connais pas du tout.

Est-ce que quelqu'un pourrait m'expliquer clairement comment faire s'il vous plaît?


D'avance merci à tous !



3 réponses

Messages postés
18564
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
11 juin 2021
4 297
Salut,

Tu peux créer ton lecteur personnel sans Flash grâce au HTML5 avec la balise <audio> que tu peux contrôler via Javascript.

Mais si tu ne connais pas ces langages ...

Voici un exemple :
<audio src="music.mp3" preload="auto" id="player"></audio>

<div id="player_interface">
    <img src="vol_min.jpg" alt="-" />
    <img src="play.jpg" alt="Play/Pause" />
    <img src="vol_plus.jpg" alt="+" />
    <div id="vol">Volume: <span>100%</span></div>
</div>

<script type="text/javascript">
var images = document.getElementById('player_interface').getElementsByTagName('img');
var player = document.getElementById('player');
var volume_span = document.getElementById('player_interface').getElementsByTagName('span').item(0);
var c_volume = 100;

var volume_min = images[0];
var volume_plus = images[2];
var play = images[1];

play.onclick = function() {
    if(player.paused) {
        player.play();
    } else {
        player.pause();
    }
};

volume_min.onclick = function() {
    c_volume -= 5;
    if(c_volume < 0) c_volume = 0;
     
    player.volume = parseFloat(c_volume / 100);
    volume_span.innerHTML = c_volume+"%";
};

volume_plus.onclick = function() {
    c_volume += 5;
    if(c_volume > 100) c_volume = 100;
     
    player.volume = parseFloat(c_volume / 100);
    volume_span.innerHTML = c_volume+"%";
};
</script>

La pensée mène le monde.
Messages postés
25
Date d'inscription
jeudi 4 août 2011
Statut
Membre
Dernière intervention
30 mai 2015

merci pour ce code mais j'ai un souci; j'ai créé mes boutons avec PS en format jpg et j'ai modifié dans le code le nom de la musique (qui se trouve dans le dossier sound du dossier de mon site) et le nom des images (qui se trouvent dans le dossier player_interface du dossier de mon site).
Voila en gros ce que j'ai changé:

<audio src="Kaamelott.mp3" preload="auto" id="player"></audio>

<div id="player_interface">
    <img src="vol-.jpg" alt="-" />
    <img src="play-pause.jpg" alt="Play/Pause" />
    <img src="vol+.jpg" alt="+" />
    <div id="vol">Volume: <span>100%</span></div>
</div>


Est-ce que j'ai fait une fausse manip' ou bien est-ce que je doit modifier quelque chose d'autre?


Merci d'avance.
Messages postés
18564
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
11 juin 2021
4 297
Le nom des dossiers doit être indiqué dans les chemins.

<audio src="sound/Kaamelott.mp3" preload="auto" id="player"></audio>

<div id="player_interface">
    <img src="player_interface/vol-.jpg" alt="-" />
    <img src="player_interface/play-pause.jpg" alt="Play/Pause" />
    <img src="player_interface/vol+.jpg" alt="+" />
    <div id="vol">Volume: <span>100%</span></div>
</div>