代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
<script src="./jQueryRotateCompressed.js"></script>
<title>Kai FM Player</title>
</head>
<body>
<div class="container-fluid" style="margin: 25px;">
<div class="media">
<div class="media-left media-middle">
<img width="120" height="120" class="media-object img-circle" src="https://img3.doubanio.com/view/subject/m/public/s4272611.jpg" id="song_img">
</div>
<div class="media-body">
<h3 class="media-heading" id="song_title" style="overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">It's Five O'clock</h3>
<h5 id="song_singers">Aphrodite's Child / 1994</h5>
<audio controls="controls" id="player" src="http://mr1.doubanio.com/d5ca542439a27cdb4da0b306f7f660dd/0/fm/song/p680413_128k.mp4" autoplay="autoplay"></audio>
</div>
</div>
<br>
<button class="btn btn-lg btn-success" style="width: 385px;" id="btn_change_song">Change!</button>
<!-- <button class="btn btn-lg btn-default" id="add_fav_list"><i id="add_fav_list_icon" class="glyphicon glyphicon-star-empty"></i></button>
<button class="btn btn-lg btn-default" id="play_fav_list"><i class="glyphicon glyphicon-list-alt"></i></button> -->
<br>
<br>
<button class="btn btn-default" id="song_id_1" onClick=change_song_style("song_id_1")>华语</button>
<button class="btn btn-default" id="song_id_2" onClick=change_song_style("song_id_2")>欧美</button>
<button class="btn btn-default" id="song_id_3" onClick=change_song_style("song_id_3")>70‘s</button>
<button class="btn btn-default" id="song_id_4" onClick=change_song_style("song_id_4")>80‘s</button>
<button class="btn btn-default" id="song_id_6" onClick=change_song_style("song_id_6")>粤语</button>
<button class="btn btn-default" id="song_id_27" onClick=change_song_style("song_id_27")>古典</button>
<button class="btn btn-default" id="song_id_153" onClick=change_song_style("song_id_153")>工作学习</button>
<button id="play_mode" class="btn btn-default pull-right"> <i id="play_mode_icon" class="glyphicon glyphicon-random"></i></button>
<br>
<div style="margin-top:15px; font-size: 13px; color: #aaa;">Press key 'n / N / Enter' to change a song.</div>
</div>
<script type="text/javascript" src="songs.js"></script>
<script>
var play_mode = 0; //0, random; 1, repeat
var songs_data_current;
var d;
var t1;
var angle = 0;
function img_rotate()
{
clearInterval(t1);
t1 = setInterval(function(){
angle+=3;
$(".img-circle").rotate(angle);
},100);
}
function img_rotate_stop()
{
clearInterval(t1);
}
function remove_all_btn_css()
{
$("#song_id_1").removeClass("btn-danger");
$("#song_id_2").removeClass("btn-danger");
$("#song_id_3").removeClass("btn-danger");
$("#song_id_4").removeClass("btn-danger");
$("#song_id_6").removeClass("btn-danger");
$("#song_id_27").removeClass("btn-danger");
$("#song_id_153").removeClass("btn-danger");
// $("#play_fav_list").removeClass();
// $("#play_fav_list").addClass("btn btn-lg btn-default");
}
function change_song_style(sid)
{
if(sid == 'song_id_1')
{
songs_data_current = songs_data_1;
remove_all_btn_css();
$("#song_id_1").addClass('btn btn-danger');
}
else if (sid == 'song_id_2')
{
songs_data_current = songs_data_2;
remove_all_btn_css();
$("#song_id_2").addClass('btn btn-danger');
}
else if (sid == 'song_id_3')
{
songs_data_current = songs_data_3;
remove_all_btn_css();
$("#song_id_3").addClass('btn btn-danger');
}
else if (sid == 'song_id_4')
{
songs_data_current = songs_data_4;
remove_all_btn_css();
$("#song_id_4").addClass('btn btn-danger');
}
else if (sid == 'song_id_6')
{
songs_data_current = songs_data_6;
remove_all_btn_css();
$("#song_id_6").addClass('btn btn-danger');
}
else if (sid == 'song_id_27')
{
songs_data_current = songs_data_27;
remove_all_btn_css();
$("#song_id_27").addClass('btn btn-danger');
}
else if (sid == 'song_id_153')
{
songs_data_current = songs_data_153;
remove_all_btn_css();
$("#song_id_153").addClass('btn btn-danger');
}
else
{
songs_data_current = songs_data_1;
remove_all_btn_css();
$("#song_id_1").addClass('btn btn-danger');
}
d = jQuery.parseJSON(songs_data_current);
play_songs();
}
// function fav_icon_empty()
// {
// $("#add_fav_list_icon").removeClass();
// $("#add_fav_list_icon").addClass("glyphicon glyphicon-star-empty");
// }
// function check_sid()
// {
// var d = new Date()
// var rand_str = Math.random();
// if (localStorage.getItem("sid") == null)
// {
// // alert('null');
// localStorage.setItem("sid", "uuid_"+d.getTime()+rand_str);
// }
// else
// {
// // alert('NOT null');
// }
// return localStorage.getItem("sid");
// }
function play_songs()
{
img_rotate();
console.log(d.length);
if(d.length == 1000)
var i = Math.floor((Math.random()*1000)+1);
else if(d.length == 2000)
var i = Math.floor((Math.random()*2000)+1);
else
var i = Math.floor((Math.random()*1000)+1);
console.log(i);
// console.log('play song ....');
// console.log(d);
// console.log(i);
title = d[i]['song_title'];
picture = d[i]['song_img'];
url = d[i]['url'];
public_time = d[i]['public_time'];
singers = d[i]['singers'];
$("#song_img").attr('src', picture);
$("#song_title").html(title);
$("#song_title").attr('title', title);
$("#song_singers").html(singers + ' / ' + public_time);
$("#player").attr('src', url);
console.log(url);
var player = $("#player")[0];
player.play();
}
function play_fav_songs()
{
var i = Math.floor((Math.random()*10));
// console.log('play song ....');
// console.log(d);
console.log(i);
// title = d[i]['title'];
// picture = d[i]['picture'];
// url = d[i]['url'];
// public_time = d[i]['public_time'];
// singers = d[i]['singers'];
title = d[i]['song_title'];
picture = d[i]['song_img'];
url = d[i]['url'];
public_time = d[i]['public_time'];
singers = d[i]['singers'];
$("#song_img").attr('src', picture);
$("#song_title").html(title);
$("#song_title").attr('title', title);
$("#song_singers").html(singers + ' / ' + public_time);
$("#player").attr('src', url);
console.log(url);
var player = $("#player")[0];
player.play();
}
$(document).ready(function(){
img_rotate_flag = 1;
// localStorage.setItem("sid","uuid_xxxxxxxxx");
// var sid = check_sid();
change_song_style('song_id_1');
play_songs();
$('.img-circle').click(function(){
if (img_rotate_flag == 1)
{
img_rotate();
img_rotate_flag = 0;
}
else
{
img_rotate_stop();
img_rotate_flag = 1;
}
});
$("#btn_change_song").click(function(){
play_songs();
});
// $("#add_fav_list").click(function(){
// $("#add_fav_list_icon").removeClass();
// $("#add_fav_list_icon").addClass("glyphicon glyphicon-star");
// //ajax
// console.log(sid);
// console.log($("#song_img").attr('src'));
// console.log($("#song_title").html());
// song_singers_info = $("#song_singers").html().split('/');
// console.log(song_singers_info[0]);
// console.log(song_singers_info[1]);
// $.post(
// "http://weapp.beesoft.ink/api/set_fav_list",
// {
// "sid": sid,
// "song_img": $("#song_img").attr('src'),
// "song_title": $("#song_title").html(),
// "url": $("#player").attr('src'),
// "song_singers": song_singers_info[0],
// "public_time": song_singers_info[1]
// },
// function(data, status){
// console.log("set ok");
// console.log(data);
// }
// );
// //endof post
// });
// $("#play_fav_list").click(function(){
// $("#play_fav_list").removeClass();
// $("#play_fav_list").addClass("btn btn-lg btn-danger");
// //ajax
// $.post(
// "http://weapp.beesoft.ink/api/get_fav_list",
// {
// "sid": sid
// },
// function(data, status){
// console.log("get ok");
// console.log(data);
// // songs_data_current = data;
// remove_all_btn_css();
// // d = jQuery.parseJSON(songs_data_current);
// // d = jQuery.parseJSON(data);
// d = data['data'];
// play_fav_songs();
// }
// );
// //endof post
// });
$(document).bind('keypress', function(e) {
if(e.keyCode==13 || e.keyCode==78 || e.keyCode==110){
// fav_icon_empty();
//n,N,CR
play_songs();
}
});
// when ended play next song
var player = document.getElementById("player");
player.addEventListener('ended',function () {
console.log("ended ....................");
// fav_icon_empty();
play_songs();
});
$("#play_mode").click(function(){
if(play_mode == 0) //to repeat
{
$("#play_mode_icon").removeClass("glyphicon glyphicon-random");
$("#play_mode_icon").addClass("glyphicon glyphicon-repeat");
$("#player").attr("loop","loop");
$("#play_mode").prop("title", "repeat");
play_mode = 1;
}
else
{
$("#play_mode_icon").removeClass("glyphicon glyphicon-repeat");
$("#play_mode_icon").addClass("glyphicon glyphicon-random");
$("#player").removeAttr("loop");
$("#play_mode").prop("title", "random");
play_mode = 0;
}
});
// $('audio').bind('pause', function(){
// alert('暂停');
// });
// $('audio').bind('play', function(){
// alert('开始播放');
// });
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。