Home >Backend Development >PHP Tutorial >javascript - How do I use the following js code to play the next song when I click the next song button?
javascript - How do I use the following js code to play the next song when I click the next song button?
- WBOYOriginal
- 2016-10-23 00:12:491239browse
I made a random play, and then when I wanted to loop through the asynchronously returned song data, the original effect was to click the left and right buttons to play the previous and next songs, but the result was that clicking the left button directly played the first song. One song, and when the right button is clicked, the last song is played directly. Can anyone help give me a solution? The code is as follows
<code><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<style>
body{
background:deepskyblue;
}
.container{
margin-top:150px;
}
a{
color: #000;
}
span{
font-size: 2.5em;
}
.music{
border:1px #ddd dashed;
}
.info li{
color: red;
}
.list{
border: 1px dashed #ddd;
}
.time-bar{
width: 0;
height: 5px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-4 col-xs-8">
<div class="logo"><img src="img/bg.jpg" class="img-responsive" alt=""/></div>
<div class="music text-center">
<audio id="audio" src="res/TakeMeToYourHeart.mp3" loop="loop" autoplay></audio>
<ul class="list-inline list-unstyled info">
<li></li>
<li></li>
</ul>
<ul class="list-unstyled list-inline control">
<li><a href="#"><span class="glyphicon glyphicon-backward"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-play"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-forward"></span></a></li>
</ul>
<div class="time-bar"></div>
</div>
</div>
<div class="col-xs-4">
<ul class="list-unstyled list text-center">
<h1 class="">歌单</h1>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
//加载页面的播放器动画
// setTimeout(function(){
// $('.row').toggle('pulsate');
// console.log('aa');
// },1000);
document.getElementById("audio").setAttribute('loop','loop');//循环歌曲
//异步请求数据库歌曲数据
$(document).ready(function(){
$.getJSON('musicList.php',function(data){
console.log(data);
var playList=data;
doResponse(playList);
})
}
);
//测试数据
// var playList=[{'player':'薛之谦','music':'来日方长'},
// {'player':'薛之谦','music':'一半.mp3'},
// {"player":'邓紫棋','music':'喜欢你.mp3'}];
function doResponse(playList) {
for (var i = 0; i < playList.length; i++) {
$('.list-unstyled.list').append('<li>' + playList[i].player + playList[i].music + '</li>')
};
var str = $('#audio')[0].getAttribute('src').split('res/');
console.log(str);
$('.info li:first-child')[0].innerHTML = str[1].split('.mp3')[0].split('.');
$('.music ul li a').click(function (e) {
e.preventDefault();
var index = $(this).parent().index();
var x=parseInt(Math.random()*(playList.length-1));
console.log(x);
if (index == 0) {
$('audio').attr('src', 'res/' + playList[x].music);
$('.info li:first-child')[0].innerHTML = playList[x].player;
$('.info li:last-child')[0].innerHTML = playList[x].music.split('.mp3')[0].split('.');
console.log(index);
console.log(i);
} else if (index == 1) {
if ($('#audio')[0].paused) {
$('#audio')[0].play();
$('.control li a span:eq(1)')[0].className = 'glyphicon glyphicon-play'
} else {
$('#audio')[0].pause();
$('.control li a span:eq(1)')[0].className = 'glyphicon glyphicon-stop'
}
//console.log(index);
} else if(index==2) {
$('audio').attr('src', 'res/' + playList[x].music);
$('.info li:first-child')[0].innerHTML = playList[x].player;
$('.info li:last-child')[0].innerHTML = playList[x].music.split('.mp3')[0].split('.');
console.log(index);
}
//console.log(parseFloat($('#audio')[0].duration))
});
}
</script>
</body>
</html></code>
Reply content:
I made a random play, and then when I wanted to loop through the asynchronously returned song data, the original effect was to click the left and right buttons to play the previous and next songs, but the result was that clicking the left button directly played the first song. One song, and when the right button is clicked, the last song is played directly. Can anyone help give me a solution? The code is as follows
<code><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<style>
body{
background:deepskyblue;
}
.container{
margin-top:150px;
}
a{
color: #000;
}
span{
font-size: 2.5em;
}
.music{
border:1px #ddd dashed;
}
.info li{
color: red;
}
.list{
border: 1px dashed #ddd;
}
.time-bar{
width: 0;
height: 5px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-4 col-xs-8">
<div class="logo"><img src="img/bg.jpg" class="img-responsive" alt=""/></div>
<div class="music text-center">
<audio id="audio" src="res/TakeMeToYourHeart.mp3" loop="loop" autoplay></audio>
<ul class="list-inline list-unstyled info">
<li></li>
<li></li>
</ul>
<ul class="list-unstyled list-inline control">
<li><a href="#"><span class="glyphicon glyphicon-backward"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-play"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-forward"></span></a></li>
</ul>
<div class="time-bar"></div>
</div>
</div>
<div class="col-xs-4">
<ul class="list-unstyled list text-center">
<h1 class="">歌单</h1>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
//加载页面的播放器动画
// setTimeout(function(){
// $('.row').toggle('pulsate');
// console.log('aa');
// },1000);
document.getElementById("audio").setAttribute('loop','loop');//循环歌曲
//异步请求数据库歌曲数据
$(document).ready(function(){
$.getJSON('musicList.php',function(data){
console.log(data);
var playList=data;
doResponse(playList);
})
}
);
//测试数据
// var playList=[{'player':'薛之谦','music':'来日方长'},
// {'player':'薛之谦','music':'一半.mp3'},
// {"player":'邓紫棋','music':'喜欢你.mp3'}];
function doResponse(playList) {
for (var i = 0; i < playList.length; i++) {
$('.list-unstyled.list').append('<li>' + playList[i].player + playList[i].music + '</li>')
};
var str = $('#audio')[0].getAttribute('src').split('res/');
console.log(str);
$('.info li:first-child')[0].innerHTML = str[1].split('.mp3')[0].split('.');
$('.music ul li a').click(function (e) {
e.preventDefault();
var index = $(this).parent().index();
var x=parseInt(Math.random()*(playList.length-1));
console.log(x);
if (index == 0) {
$('audio').attr('src', 'res/' + playList[x].music);
$('.info li:first-child')[0].innerHTML = playList[x].player;
$('.info li:last-child')[0].innerHTML = playList[x].music.split('.mp3')[0].split('.');
console.log(index);
console.log(i);
} else if (index == 1) {
if ($('#audio')[0].paused) {
$('#audio')[0].play();
$('.control li a span:eq(1)')[0].className = 'glyphicon glyphicon-play'
} else {
$('#audio')[0].pause();
$('.control li a span:eq(1)')[0].className = 'glyphicon glyphicon-stop'
}
//console.log(index);
} else if(index==2) {
$('audio').attr('src', 'res/' + playList[x].music);
$('.info li:first-child')[0].innerHTML = playList[x].player;
$('.info li:last-child')[0].innerHTML = playList[x].music.split('.mp3')[0].split('.');
console.log(index);
}
//console.log(parseFloat($('#audio')[0].duration))
});
}
</script>
</body>
</html></code>Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：About the problem of sprintf intercepting decimalsNext article：About the problem of sprintf intercepting decimals