效果图：可实现左右点击下一个播放
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>
网友评论