仿QQ音乐播放器

效果图:可实现左右点击下一个播放


3.jpg

<b>仿QQ音乐播放器</b>
<ol>
<li>Ajax方式请求后端数据 </li><li>播放器制作</li><li>滚动歌词制作</li><li>切换音乐</li>
</ol>

<h4>audio 音频标签</h4>
<b>媒体属性:</b>
controls:是否显示播放控件,默认不显示 false
autoplay:是否自动播放,默认不自动播放 false
loop:是否循环播放,默认不循环 false
currentTime:当前播放的位置,赋值可改变位置
duration:当前资源长度 流返回无限
<b>媒体属性和方法:</b>
volume:读取或修改媒体的的播放音量,范围从0到 1,0为表单,1为最大音量。
muted:读取或修改媒体的表单状态,该值为布尔值,true表示静音状态,false表示非静音状态。
paused:是否暂停
play():播放的方法
pause():暂停的方法
<b>媒体事件</b>
canplaythrough:音频缓冲好后触发
ended:音频播放结束触发
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
<pre>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>

div1{ width:50px; height:50px; background:url(img/details_play.png) no-repeat; background-size:cover;}

</style>
</head>

<body>

<audio id="a1" src="img/yixiangren.m4a" controls></audio>
<div id="div1"></div>
<script>
var oA = document.getElementById('a1');
var oDiv = document.getElementById('div1');
oDiv.onclick = function(){
if(oA.paused){
oA.play();
oDiv.style.backgroundImage = 'url(img/details_pause.png)';
}
else{
oA.pause();
oDiv.style.backgroundImage = 'url(img/details_play.png)';
}
};
setInterval(function(){
//console.log( oA.currentTime ); //当前播放的时间
//console.log( oA.duration ); //总时间
//console.log( oA.volume ); //音量
//console.log( oA.muted ); //是否静音
//console.log( oA.paused ); //是否暂停
},1000);

oA.oncanplaythrough = function(){ //音频缓冲好后触发
console.log(123);
};
oA.onended = function(){ //音频播放结束触发
console.log(456);
};
</script>
</body>
</html>
</pre>
<b>PHP</b>
<pre>
<?PHP

//echo 'hello';

header("Content-type: text/html; charset=utf-8");//为防止返回客户端乱编
mysql_connect('localhost','root','');//连接mySQL(本地域名,数据库用户名,密码)
mysql_select_db('music');//music数据库
mysql_query('set names utf8');

$sql = "select * from music_list where id = 4";

$query = mysql_query($sql);

//echo $query;

//print_r(mysql_fetch_assoc($query));

$arr = mysql_fetch_assoc($query);

echo json_encode($arr);//转成json格式

?></pre>
<ol>
<li>mysql_fetch_row </li><li>mysql_fetch_assoc :php返回的是键值对的形式</li><li>mysql_fetch_array </li><li>mysql_fetch_object</li>
</ol>

<b>MYSQL</b>
<pre>
select * from 表 where 字段 = 值
insert into 表(字段) values(值)
delete from 表 where 字段 = 值
update 表 set 字段 = 新值 where id = $id
</pre>

推荐阅读更多精彩内容

  • 最近朋友想做个音乐App,让我帮忙参考下。其中歌词动态滚动的效果,正好我之前也没做过,顺便学习一下,先来个预览效果...
    dceac87d4213阅读 4,730评论 6 31
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 123,106评论 18 134
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 159,990评论 24 690
  • 感恩幼儿园的老师对孩子的悉心照顾。 感恩今天很晴朗的天气。 感恩父母给我生命。 感恩天地万物。 感恩祖先的恩德。
    星光2017阅读 37评论 0 1
  • 过两天大宝幼儿园放假了,加上先生7月份就出差了,准备送我们回去避暑了,妈妈在家我也可以轻松不少,最起码不用做饭了,...
    红猪猪阅读 139评论 0 2
  • 很多产品有的甚至我们都没有听说过,也许就是它存在的范围很小,还要我们一点一点的去发现,想一种办法怎么让更多的人去知...
    酒店脚轮系列解说阅读 34评论 0 0
  • 在一回首间,才忽然发现,原来,我一生的种种努力,不过只为了周遭的人对我满意而已。为了搏得他人的称许与微笑,我战战兢...
    春日暖阳sunny阅读 44评论 0 0