Musique sur site web + boutons

Résolu
scarvi Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   -  
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   -
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 !



A voir également:

3 réponses

Réponse 1 / 3
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
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.
0
Réponse 2 / 3
scarvi Messages postés 25 Date d'inscription   Statut Membre Dernière intervention  
 
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.
0
Réponse 3 / 3
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
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>
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses