HTML5打造简易播放器：Chrome运行.mp3
导读：收集整理的这篇文章主要介绍了html5教程-HTML5打造简易播放器：Chrome运行.mp3，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 如今...
收集整理的这篇文章主要介绍了html5教程-HTML5打造简易播放器：Chrome运行.mp3，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 如今HTML已经是比较热门的了，各种关于HTML5的应用程序、游戏、应用商店等也如火如荼的展开了。各大主流浏览器也纷纷开始支持HTML5标准，以备打赢新的一轮浏览器大战。话不多说，不知道大家有没有发现，可以用比较新的版本的谷歌浏览器直接打开.mP3格式的音乐。自己可以试试：
这是用谷歌浏览器直接打开mp3文件的情况。 其实，许多新的浏览器都开始支持HTML5标签，使得一些格式的流媒体可以摆脱对插件的依赖。 下面我就以标签做一个简易的音乐播放器.
控件可以通过一些内置的JavaScript函数和特性进行控制，以及进行二次开发。例如load()、play()、pause()等控制音频播放的函数，paused、ended、currentTime、startTime等属性等.
对于这个简易播放器具有播放/暂停、快进、快退等功能，结合对象绘制图形
%@language="javascript" %>
html>
head>
tITle> PlayMusic/title>
style tyPE="text/css">
p.s{ position:absolute; left:100px; top:200px; width:600px; }
audio{ width:600px; position:absolute; left:0px; top:100px; }
canvas{ position:absolute; left:0px; top:40px; }
marquee{ position:absolute; left:250px; top:180px; }
h1{ color:red; }
h1.a{ color:Green; position:absolute; left:200px; top:50px; }
/style>
/head>
body>
h1 class="a"> 欢迎使用www.2cto.COM HTML5播放器/h1>
%
VAR name = Request.QueryString("name");
if (name == "")
name = "";
name1 = "save_music//" + name + ".mp3";
//Response.Write(name);
%>
marquee behavior=scroll scrolldelay=200 scrollamount=30 width="300" > h1> %=name %> /h1> /marquee>
p class="s">
canvas width="600" height="60" id="MusicCanvas" onclick="dealclick()"> /canvas>
audio id="music" src=%=name1 %> controls>
您的浏览器不支持HTML5中的audio标签
/audio>
/p>
/body>
/html>
script type="text/javascript">
var c = document.getElementById("MusicCanvas");
var ccon = c.getContext("2d");
var toggle = document.getElementById("music");
draWPS();
drawQuick();
function drawPS() //flag=1表示播放命令，flag=0表示暂停
{
con.save();
con.beginPath();
var g = con.createRadialGradient(275, 30, 0, 275, 30, 25); //创建渐变颜色
if (toggle.paused) //暂停状态
{
g.addColorStop(0.2, "#1FD856"); //
g.addColorStop(0.8, "black"); //
toggle.play();
}
else //播放状态
{
g.addColorStop(0.2, "red"); //黄
g.addColorStop(0.8, "black"); //
toggle.pause();
}
con.fillStyle = g;
con.arc(275, 30, 25, 0, Math.PI * 2, true);
con.fill();
con.closePath();
con.reStore();
}
function drawQuick() //
{
con.save();
con.beginPath();
con.fillStyle = "grey";
con.fillRect(130, 10, 70, 40);
con.fillStyle = "black";
con.moveTo(130, 30); con.lineto(145, 13); con.lineTo(165, 13); con.lineTo(150, 30); con.lineTo(165, 47); con.lineTo(145, 47); con.lineTo(130, 30);
con.fill();
con.moveTo(160, 30); con.lineTo(175, 13); con.lineTo(195, 13); con.lineTo(180, 30); con.lineTo(195, 47); con.lineTo(175, 47); con.lineTo(160, 30);
con.fill();
con.closePath();
con.beginPath();
con.fillStyle = "grey";
var x = 350;
con.fillRect(x, 10, 70, 40);
x += 70;
con.fillStyle = "black";
con.moveTo(x, 30); con.lineTo(x - 15, 13); con.lineTo(x - 35, 13); con.lineTo(x - 20, 30); con.lineTo(x - 35, 47); con.lineTo(x - 15, 47); con.lineTo(x, 30);
x -= 30;
con.moveTo(x, 30); con.lineTo(x - 15, 13); con.lineTo(x - 35, 13); con.lineTo(x - 20, 30); con.lineTo(x - 35, 47); con.lineTo(x - 15, 47); con.lineTo(x, 30);
con.fill();
//con.moveTo(160, 40); con.lineTo(175, 23); con.lineTo(195, 23); con.lineTo(180, 40); con.lineTo(195, 57); con.lineTo(175, 57); con.lineTo(160, 40);
con.fill();
con.closePath();
con.restore();
}
function dealclick()//处理敲击事件
{
var x = event.clientX;
var y = event.clientY;
var flag = getPos(x, y);
//alert(x.toString() + " " + y.toString()+" "+flag.toString());
if(flag==0)
return;
switch (flag)//
{
case 1: drawPS(); break;
case 2: quickOrslow(0); break;
case 3: quickOrslow(1); break;
}
}
function getPos(x, y) //
{
var px=100;
var py=240;
x-=px;
y-=py;
if (x > = 275 & & x = 325 & & y > = 15 & & y= 65)
return 1;
if (x > = 130 & & x = 200 & & y > = 20 & & y = 60)
return 2;
if (x > = 350 & & x = 420 & & y > = 20 & & y = 60)
return 3;
return 0;
}
function quickOrslow(flag) //
{
var total = toggle.duration;
var s = Math.ceil(total*0.05);
if (flag == 1)//kuaijin
{
if (toggle.ended == true)
return;
var now = toggle.currentTime;
if (total - now = s)
return;
else
toggle.currentTime = now + s;
}
else //后退
{
var n = toggle.currentTime;
if (n s)
return;
else
toggle.currentTime = n - s;
}
}
/script>
这是全部的源代码，当然其中包含了一些ASP语句，适用于传递歌曲名的，可以不用考虑。
drawPS()是控制播放与暂停的函数,quickOrSlow()是控制快退的函数。
当然这个播放器是非常简陋的，但是通过加工美化，还是可以做出优秀的播放器的，而且是没有插件的。
如今HTML已经是比较热门的了，各种关于HTML5的应用程序、游戏、应用商店等也如火如荼的展开了。各大主流浏览器也纷纷开始支持HTML5标准，以备打赢新的一轮浏览器大战。
话不多说，不知道大家有没有发现，可以用比较新的版本的谷歌浏览器直接打开.mp3格式的音乐。自己可以试试：
这是用谷歌浏览器直接打开mp3文件的情况。 其实，许多新的浏览器都开始支持HTML5标签，使得一些格式的流媒体可以摆脱对插件的依赖。 下面我就以标签做一个简易的音乐播放器.
控件可以通过一些内置的JavaScript函数和特性进行控制，以及进行二次开发。例如load()、play()、pause()等控制音频播放的函数，paused、ended、currentTime、startTime等属性等.
对于这个简易播放器具有播放/暂停、快进、快退等功能，结合对象绘制图形
%@language="javascript" %>
html>
head>
title> PlayMusic/title>
style type="text/css">
p.s{ position:absolute; left:100px; top:200px; width:600px; }
audio{ width:600px; position:absolute; left:0px; top:100px; }
canvas{ position:absolute; left:0px; top:40px; }
marquee{ position:absolute; left:250px; top:180px; }
h1{ color:Red; }
h1.a{ color:Green; position:absolute; left:200px; top:50px; }
/style>
/head>
body>
h1 class="a"> 欢迎使用www.2cto.com HTML5播放器/h1>
%
var name = Request.QueryString("name");
if (name == "")
name = "";
name1 = "save_music//" + name + ".mp3";
//Response.Write(name);
%>
marquee behavior=scroll scrolldelay=200 scrollamount=30 width="300" > h1> %=name %> /h1> /marquee>
p class="s">
canvas width="600" height="60" id="MusicCanvas" onclick="dealclick()"> /canvas>
audio id="music" src=%=name1 %> controls>
您的浏览器不支持HTML5中的audio标签
/audio>
/p>
/body>
/html>
script type="text/javascript">
var c = document.getElementById("MusicCanvas");
var ccon = c.getContext("2d");
var toggle = document.getElementById("music");
drawPS();
drawQuick();
function drawPS() //flag=1表示播放命令，flag=0表示暂停
{
con.save();
con.beginPath();
var g = con.createRadialGradient(275, 30, 0, 275, 30, 25); //创建渐变颜色
if (toggle.paused) //暂停状态
{
g.addColorStop(0.2, "#1FD856"); //
g.addColorStop(0.8, "black"); //
toggle.play();
}
else //播放状态
{
g.addColorStop(0.2, "red"); //黄
g.addColorStop(0.8, "black"); //
toggle.pause();
}
con.fillStyle = g;
con.arc(275, 30, 25, 0, Math.PI * 2, true);
con.fill();
con.closePath();
con.restore();
}
function drawQuick() //
{
con.save();
con.beginPath();
con.fillStyle = "grey";
con.fillRect(130, 10, 70, 40);
con.fillStyle = "black";
con.moveTo(130, 30); con.lineTo(145, 13); con.lineTo(165, 13); con.lineTo(150, 30); con.lineTo(165, 47); con.lineTo(145, 47); con.lineTo(130, 30);
con.fill();
con.moveTo(160, 30); con.lineTo(175, 13); con.lineTo(195, 13); con.lineTo(180, 30); con.lineTo(195, 47); con.lineTo(175, 47); con.lineTo(160, 30);
con.fill();
con.closePath();
con.beginPath();
con.fillStyle = "grey";
var x = 350;
con.fillRect(x, 10, 70, 40);
x += 70;
con.fillStyle = "black";
con.moveTo(x, 30); con.lineTo(x - 15, 13); con.lineTo(x - 35, 13); con.lineTo(x - 20, 30); con.lineTo(x - 35, 47); con.lineTo(x - 15, 47); con.lineTo(x, 30);
x -= 30;
con.moveTo(x, 30); con.lineTo(x - 15, 13); con.lineTo(x - 35, 13); con.lineTo(x - 20, 30); con.lineTo(x - 35, 47); con.lineTo(x - 15, 47); con.lineTo(x, 30);
con.fill();
//con.moveTo(160, 40); con.lineTo(175, 23); con.lineTo(195, 23); con.lineTo(180, 40); con.lineTo(195, 57); con.lineTo(175, 57); con.lineTo(160, 40);
con.fill();
con.closePath();
con.restore();
}
function dealclick()//处理敲击事件
{
var x = event.clientX;
var y = event.clientY;
var flag = getPos(x, y);
//alert(x.toString() + " " + y.toString()+" "+flag.toString());
if(flag==0)
return;
switch (flag)//
{
case 1: drawPS(); break;
case 2: quickOrslow(0); break;
case 3: quickOrslow(1); break;
}
}
function getPos(x, y) //
{
var px=100;
var py=240;
x-=px;
y-=py;
if (x > = 275 & & x = 325 & & y > = 15 & & y= 65)
return 1;
if (x > = 130 & & x = 200 & & y > = 20 & & y = 60)
return 2;
if (x > = 350 & & x = 420 & & y > = 20 & & y = 60)
return 3;
return 0;
}
function quickOrslow(flag) //
{
var total = toggle.duration;
var s = Math.ceil(total*0.05);
if (flag == 1)//kuaijin
{
if (toggle.ended == true)
return;
var now = toggle.currentTime;
if (total - now = s)
return;
else
toggle.currentTime = now + s;
}
else //后退
{
var n = toggle.currentTime;
if (n s)
return;
else
toggle.currentTime = n - s;
}
}
/script>
这是全部的源代码，当然其中包含了一些ASP语句，适用于传递歌曲名的，可以不用考虑。
drawPS()是控制播放与暂停的函数,quickOrSlow()是控制快退的函数。
当然这个播放器是非常简陋的，但是通过加工美化，还是可以做出优秀的播放器的，而且是没有插件的。
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5打造简易播放器：Chrome运行.mp3
本文地址： https://pptw.com/jishu/586599.html