I am a beginner with html, css, js and stuff. Now I want to create a Site, where I have a image and if somebody click this image a random song from a playlist or something like this should be played. I have a running code to activate one song, but if I want to have more than one song it doesn't work anymore...
(the html- and js-documents are on my computer, I didn't upload it yet, so don't wonder ^^)
<html>
<head>
<title>title</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="http://ift.tt/183v7Lz"></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();
});
});
(Maybe the code isn't perfect but as I said: it works)
Now I want to have more than one song and I don't want to use a music player or so. Isn't there a way to solve this problem with html, js and jQuery (maybe css too, but I think, there is no need for that, is it?)?
Aucun commentaire:
Enregistrer un commentaire