Comment jouer de la musique au hasard sur un site html?

Je suis un débutant avec html, css, js et d'autres choses. Maintenant, je veux créer un site, où j'ai une image et si quelqu'un clique sur cette image, une chanson aléatoire d'une liste de lecture ou quelque chose comme ça devrait être joué. J'ai un code de fonctionnement pour activer une chanson, mais si je veux avoir plus d'une chanson ça ne marche plus ...Comment jouer de la musique au hasard sur un site html?

(les documents html et js sont sur mon ordinateur, je n'ai pas télécharger encore, alors ne me demande pas ^^)

<html> 
    <head> 
    <title>title</title> 
     <link type="text/css" rel="stylesheet" href="style.css"/> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="script.js"></script> 
    </head> 
    <body> 
    <div id="headline"> 
     <h1 id="hl">Headline</h1> 
     <img class="play" id="pic" src="pic.png"/> 
     <img class="pause" id="pic2" src="pic.png"/> 
    </div> 
    </body> 
</html>

$(document).ready(function() { 

    $(".pause").css ('display', 'none'); 

    $(".play").click (function(){ 
     $(".play").css ('display', 'none'); 
     $(".pause").css ('display', 'inline-block'); 
    }); 
    $(".pause").click (function(){ 
     $(".play").css ('display', 'inline-block'); 
     $(".pause").css ('display', 'none'); 
    }); 

    var audioElement = document.createElement('audio'); 
    audioElement.setAttribute('src', 'song1.mp3'); 
    /*var audioElement2 = document.createElement('audio'); 
    audioElement2.setAttribute('src', 'song2.mp3');*/ 

    $.get(); 

    audioElement.addEventListener("load", function() { 
     audioElement.play(); 
    }, true); 
    /*audioElement2.addEventListener("load", function() { 
     audioElement2.play(); 
    }, true);*/ 

    var x = 1 /*Math.round(Math.random() * (2)) + 1*/; 
    if (x = 1) { 
     $('.play').click(function() { 
     }); 
    /*} else { 
     $('.play').click(function() { 
      audioElement2.play(); 
     });*/ 
    } 

    $('.pause').click(function() { 
      audioElement.pause(); 
      audioElement2.pause(); 
    }); 
});

(Peut-être que le code est pas parfait, mais comme je l'ai dit: il fonctionne)
maintenant, je veux avoir plus qu'une chanson et je ne veux pas utiliser un lecteur de musique ou plus. N'y at-il pas un moyen de résoudre ce problème avec html, js et jQuery (peut-être aussi css, mais je pense, il n'y a pas besoin de ça, n'est-ce pas?)?

Source

2015-10-15 html user

Pas besoin de plusieurs questions linguistiques. Donc, nous avons une base d'utilisateurs qui connaît très bien l'anglais. Cela rend la question inutilement énorme. –

Pouvez-vous simplement changer le src de l'élément audio à un src aléatoire? – Shilly

Vous devriez avoir un tableau représentant votre liste de lecture, puis choisissez un élément aléatoire et de jouer

Quelque chose comme ceci:

var playlist = Array("song1.mp3", "song2.mp3", "song3.mp3"); 
var randomSong = playlist[Math.floor(Math.random()*playlist.length)]; 
var audioElement = document.createElement('audio'); 
audioElement.setAttribute('src', randomSong); 
/* ... your code continues here ... */

Source

2015-10-15 13:08:19 pistou

Comment jouer de la musique au hasard sur un site html?

Répondre

Questions connexes