Nowadays, HTML is already popular, and various HTML5 applications, games, and app stores are also in full swing. Major browsers have also begun to support the HTML5 standard in order to win a new round of browser wars.
If you don't know what you are looking for, you can use a new Google browser to directly open music in simplified format. You can try it yourself:
This is the case where Google Chrome directly opens mp3 files. In fact, many new browsers are beginning to support HTML5 tags, so that some formats of streaming media can get rid of plug-in dependencies. Next I will make a simple music player with tags.
Controls can be controlled through some built-in JavaScript Functions and features, as well as secondary development. For example, load (), play (), pause () and other functions that control audio playback, paused, ended, currentTime, startTime, and other attributes.
This simple player provides functions such as playing, pausing, fast forward, and fast return.
<% @ Language = "javascript" %>
<Html>
<Head>
<Title> PlayMusic </title>
<Style type = "text/css">
Div. 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"> welcome to www.2cto.com HTML5 player <%
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"> <Div class = "s">
<Canvas width = "600" height = "60" id = "MusicCanvas" onclick = "dealclick ()"> </canvas>
<Audio id = "music" src = <% = name1 %> controls>
Your browser does not support the audio tag in HTML5.
</Audio>
</Div>
</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 indicates the Playback command, flag = 0 indicates the pause
{
Con. save ();
Con. beginPath ();
Var g = con. createRadialGradient (275, 30, 0,275, 30, 25); // create a gradient color
If (toggle. paused) // pause status
{
G. addColorStop (0.2, "#1FD856 ");//
G. addColorStop (0.8, "black ");//
Toggle. play ();
}
Else // playback status
{
G. addColorStop (0.2, "red"); // yellow
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 = "gray ";
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 = "gray ";
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 () // process the hitting event
{
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 // back
{
Var n = toggle. currentTime;
If (n <s)
Return;
Else
Toggle. currentTime = n-s;
}
}
</Script>
This is all the source code. Of course, it contains some ASP statements, which are suitable for transferring song names.
DrawPS () is a function that controls playback and pause, and quickOrSlow () is a function that controls fast return.
Of course, this player is very simple, but through processing and beautification, you can still make excellent players, and there is no plug-in.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
