Sujet Précédent Sujet Suivant

Musique sur site web + boutons

Résolu/Fermé
scarvi Messages postés 25 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 30 mai 2015 - 4 août 2011 à 14:03
avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 - 4 août 2011 à 21:30
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 dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 505
Modifié par avion-f16 le 4/08/2011 à 21:28
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 jeudi 4 août 2011 Statut Membre Dernière intervention 30 mai 2015
Modifié par scarvi le 4/08/2011 à 20:58
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 dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 505
4 août 2011 à 21:30
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