HTML元素详细介绍之Audio&Video

我就是我 2022-09-24 04:28 276阅读 0赞

准备把HTML5中的每一个新元素都做一番详细的介绍，希望对大家开发有很大的帮助，其中每个元素都会带有一两个示例，希望大家喜欢哈。

先做Audio和Video的介绍

audio&video可以说是html5给大家带来的一个惊喜，虽然以前不管通过flash，还是一些视频，音频插件大家都可以播放媒体文件，但是现在的audio和viedo更加标准，有丰富的javascriptAPI可以对其操作，大家开发一个视频播放器，音频播放器几乎是相当简单。废话就不说了。。。

首先给大家列出一张表为audio和video所支持的格式(type属性为所支持的编码方式):

H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container

H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container

H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container

H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container

MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container

MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container

MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container

Theora video and Vorbis audio in Ogg container

Theora video and Speex audio in Ogg container

Vorbis audio alone in Ogg container

Speex audio alone in Ogg container

FLAC audio alone in Ogg container

Dirac video and Vorbis audio in Ogg container

Theora video and Vorbis audio in Matroska container

1.audio标签

(1)设置autopaly为自动播放，不显示播放器，如果设置为controls默认的外观如下图：

![2011092815214760.jpg][]

当然如果希望开发自己的音频播放器autoplay和controls属性都不应该设置，之后通过javascript控制音频播放。

(2)当设置preload为none时，不进行预加载，还可以设置为auto。

(3)src设置你音频的位置，音频文件的另外一种设置方法：

这样的话浏览器会从第一个开始选择，如果发现可以播放的就播放，都不能播放则显示代替文字。

当然audio还有一些其他属性我就不多说了，下面主要介绍与javascript结合使用。

2.audio与javascript

(1)pause(),play(),load(),canPlayType()

前三个我就不细说了，大家一看就明白，canPlayType()可以测试我们的浏览器是否支持相应的格式。

[\+  ][ ]

通过!!将结果转化为bool类型，并显示到id为info的div容器中，当然大家也可以不显示，并且对用户说你该升级浏览器啦，并提供下载链接。。所有可能支持的格式我在本文的一开始便列了一张表给大家看，要记住不同的浏览器支持的格式并不相同，所以最好多准备几种格式，通过多个<source></source>就可以实现！

(2)duration,paused,ended,currentSrc

这四个属性为常用的只读属性，duration为此文件的长度，paused返回是否暂停，ended返回是否结束，currentSrc返回当前播放文件的地址。

(3)currentTime,volume,muted

这三个属性为可设属性，第一个返回或是设置当前播放位置。volume设置音量大小从0.0-1.0，muted设置是否静音。

(4)通过上面几个属性或是方法通过下面代码可以模仿音频播放进度条，并且有一个添加搜查的功能。

javascript：

<table style="border-collapse:collapse; border-spacing:0px; border:1px solid silver; width:1208px; word-break:break-word; margin:0px!important; padding:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; font-size:12px!important; min-height:auto!important; background:none!important"> 
 <tbody style="margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
  <tr style="margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
   <td style="padding:3px; border:1px solid silver; border-collapse:collapse; margin:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important"> 
    <div style="margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:relative!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(244,244,244)!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">window.setInterval(function () { </code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">document.getElementById(</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"result"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">).innerHTML = Math.floor(document.getElementById(</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"test_music"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">).currentTime);</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(244,244,244)!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:rgb(0,0,255)!important; background:none!important">var</code>&nbsp; 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">remainingTime = Math.floor(document.getElementById(</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"test_music"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">).duration - document.getElementById(</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"test_music"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">).currentTime);</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:rgb(0,0,255)!important; background:none!important">if</code>&nbsp; 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">(remainingTime &lt;= 30) { </code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(244,244,244)!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">document.getElementById(</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"result"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">).innerHTML = </code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"还有"</code>&nbsp; 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">+ remainingTime + </code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"s 播放完毕，如果您喜欢是否添加到搜藏夹？"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">;</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">document.getElementById(</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"check"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">).style.display = </code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"block"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">;</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(244,244,244)!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">}</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">}, 500)</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(244,244,244)!important">
       &nbsp; 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">function addDataBase() { </code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(244,244,244)!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:rgb(0,130,0)!important; background:none!important">//判断是否要添加到数据库，并添加！</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

HTML:

<table style="border-collapse:collapse; border-spacing:0px; border:1px solid silver; width:1208px; word-break:break-word; margin:0px!important; padding:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; font-size:12px!important; min-height:auto!important; background:none!important"> 
 <tbody style="margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
  <tr style="margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
   <td style="padding:3px; border:1px solid silver; border-collapse:collapse; margin:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important"> 
    <div style="margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:relative!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(244,244,244)!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&lt;body&gt;</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&lt;div id=</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"info"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&gt;&lt;/div&gt;</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(244,244,244)!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&lt;div id=</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"result"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&gt;&lt;/div&gt;</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&lt;div id=</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"check"</code>&nbsp; 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">style=</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">" display:none;"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&gt;&lt;input type=</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"checkbox"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">/&gt;&lt;/div&gt;</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(244,244,244)!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&lt;audio controls id=</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"test_music"</code>&nbsp; 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">preload=metadata onended=</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"addDataBase()"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&gt;</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&lt;source src=</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"old_boy.mp3"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&gt;&lt;/source&gt;</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(244,244,244)!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&lt;source src=</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"old_boy.oga"</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&gt;&lt;/source&gt;</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; color:blue!important; background:none!important">"对不起浏览器不支持"</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(244,244,244)!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&lt;/audio&gt;</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,&quot;Bitstream Vera Sans Mono&quot;,&quot;Courier New&quot;,Courier,monospace!important; min-height:auto!important; background:none!important">&lt;/body&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

通过setInterval(function(),interval)来指定每隔500ms出发一次，动态显示currenttime计算剩余时间remainingtime当剩余时间少于30s后，让用户选择是否将此音乐添加到数据库中，onenden表示在播放完毕后触发addDataBase方法。

![2011092817123949.jpg][]

![2011092817170987.jpg][]

今天就先把audio控件的基本使用方法介绍到这里，下次会讲一个音乐播放器的设计过程，并加入一些特别的元素。

今天给大家带来一个基于HTML5和Javascript的音乐播放器制作的例子，功能很简单啦，主要是让大家理解理解HTML5和Javascript编程的一些小技巧。

大体的实现思路是：

1.在服务器上放一XML文件，里面有歌曲的信息，比如歌曲名，歌曲的url地址，歌曲的分类等。

2.javascript读取xml文件，并解析里面的内容。

3.创建一个类musicList，里面定义一些属性啊，方法啊。属性比如有：当前播放的歌曲，上一首歌曲，下一首歌曲。方法比如有：控制播放，播放下一首歌，播放上一首歌。

4.还有一个music类是存放歌曲的信息。

5.之后就是通过一些javascript提供的函数来操作，audio标签进行音乐的播放。

界面相当简单。就几个div和button。

下面就说说一些详细的制作步骤：

1.首先定义一music类，存放的是单一首歌曲的信息。

//定义music类
            function music(txt, url, catalog) {
       
                this.txt = txt;
                this.url = url;
                this.catalog = catalog;
            }

2.有了music类，我们就开始着重编写musicList类，里面实现的属性如下：

![复制代码][copycode.gif]

//所有的歌曲
                this.allMusic = getAllMusic(xdoc);
                //当前歌曲
                this.currentMusic = this.allMusic[0];
                //当前歌曲索引
                this.currentIndex = this.currentMusic.key;
                //audio元素
                this.audioElement = audioSource;
                //定义上一首歌                        
                if (this.currentIndex - 1 >= 0) {
       
                    this.previousMusic = allMusic[this.currentIndex - 1];
                }
                else {
       
                    this.previousMusic = null;
                }
                //定义下一首歌
                if (this.currentIndex + 1 < this.allMusic.length) {
       
                    this.nextMusic = this.allMusic[this.currentIndex + 1];
                }
                else {
       
                    this.nextMusic = null;
                }

![复制代码][copycode.gif]

getAllMusic（xdoc）函数是获取一个数组，里面存放着所有的歌曲类。

![复制代码][copycode.gif]

//获取所有的音乐列表
            function getAllMusic(xdoc) {
       
                this._allMusic = new Array();
                nodes = xdoc.documentElement.childNodes;
                for (var i = 0; i < nodes.length; i++) {
       
                    var _music = new music(nodes.item(i).childNodes.item(0).text, nodes.item(i).childNodes.item(1).text, nodes.item(i).childNodes.item(2).text);
                    _allMusic.push({ key: i, value: _music });
                }
                return _allMusic;
            }

![复制代码][copycode.gif]

3.musicList类实现的方法有：

a.这个方法是用来控制播放与暂停的。

![复制代码][copycode.gif]

//控制音乐
            musicList.prototype.controlMusic = function () {
       
                var toggle = document.getElementById("toggle");
                if (this.audioElement.paused) {
       
                    this.audioElement.play();
                    toggle.innerHTML = "暂停";
                }
                else {
       
                    this.audioElement.pause();
                    toggle.innerHTML = "播放";
                }
            }

![复制代码][copycode.gif]

b.播放下一首歌，并改变几个属性。

![复制代码][copycode.gif]

//下一首歌
            musicList.prototype.moveToNextMusic = function () {
       
                if (this.currentIndex + 1 < this.allMusic.length) {
       
                    this.currentMusic = this.allMusic[this.currentIndex + 1];
                    this.currentIndex++;
                    this.audioElement.src = this.currentMusic.value.url;
                    this.audioElement.play();
                    document.getElementById("toggle").innerHTML = "暂停";
                    this.previousMusic = this.allMusic[this.currentIndex - 1];
                    if (this.currentIndex + 1 < this.allMusic.length) {
       
                        this.nextMusic = this.allMusic[this.currentIndex + 1];
                    }
                    else {
       
                        this.nextMusic = this.allMusic[0];
                    }
                    this.updataMusicList();
    
                }
                else {
       
                    //返回到头部
                    this.currentMusic = this.allMusic[0];
    
                    this.currentIndex = this.currentMusic.key;
    
                    if (this.currentIndex - 1 >= 0) {
       
                        this.previousMusic = allMusic[this.currentIndex - 1];
                    }
                    else {
       
                        this.previousMusic = null;
                    }
    
                    if (this.currentIndex + 1 < this.allMusic.length) {
       
                        this.nextMusic = this.allMusic[this.currentIndex + 1];
                    }
                    else {
       
                        this.nextMusic = null;
                    }
                    this.audioElement.src = this.currentMusic.value.url;
                    this.audioElement.play();
                    document.getElementById("toggle").innerHTML = "暂停";
                    this.updataMusicList();
                }
            }

![复制代码][copycode.gif]

c.播放上一首歌

![复制代码][copycode.gif]

//上一首歌
            musicList.prototype.moveToPreviousMusic = function () {
       
                if (this.currentIndex - 1 >= 0) {
       
                    this.currentMusic = this.allMusic[this.currentIndex - 1];
                    this.currentIndex--;
                    this.audioElement.src = this.currentMusic.value.url;
                    this.audioElement.play();
                    document.getElementById("toggle").innerHTML = "暂停";
                    this.nextMusic = this.allMusic[this.currentIndex+1];
                    if (this.currentIndex - 1 >= 0) {
       
                        this.previousMusic = this.allMusic[this.currentIndex - 1];
                    }
                    else {
       
                        this.previousMusic = null;
                    }
                    this.updataMusicList();
                }
                else {
       
                    this.audioElement.src = this.currentMusic.value.url;
                    this.audioElement.play();
                    document.getElementById("toggle").innerHTML = "暂停";
                    this.updataMusicList();
                }
            }

![复制代码][copycode.gif]

d.更新歌曲的目录，就是改变界面上显示当前播放和上一首下一首歌的歌名。

![复制代码][copycode.gif]

//更新歌曲目录
            musicList.prototype.updataMusicList = function () {
       
                document.getElementById("currentName").innerHTML = "当前播放：" + this.currentMusic.value.txt;
                if (this.nextMusic != null) {
       
                    document.getElementById("nextName").innerHTML = "下一首：" + this.nextMusic.value.txt;
                } else {
       
                    document.getElementById("nextName").innerHTML = "";
                }
                if (this.previousMusic != null) {
       
                    document.getElementById("prevName").innerHTML = "上一首：" + this.previousMusic.value.txt;
                } else {
       
                    document.getElementById("prevName").innerHTML = "上一首："+"";
                }
            }

![复制代码][copycode.gif]

4.html部分：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

![2011100909010972.jpg][]

给大家上个图，呵呵通过这个类再扩展扩展应该就是一个简单的网络播放器啦：

[源码下载][Link 1]（用ie9打开，因为音频是mp3的，且我写的读取xml文件的方法也是ie的读取方法没有做其他的。。）

下次给大家带来的是viedo控件和视频播放器的制作方法。

[2011092815214760.jpg]: /images/20220719/1eb82c28cad14f4bbb75792845a66c60.png
[ ]: http://www.cnblogs.com/doudougou/archive/2011/09/28/2194520.html#
[2011092817123949.jpg]: /images/20220719/715a5acdb24b43eca6a4249f83c496a6.png
[2011092817170987.jpg]: /images/20220719/8a7f08ee4fc64049b2a034348c3d6ad2.png
[copycode.gif]: /images/20220719/b8fac202ff984f939ba7946c7ffaebb1.png
[2011100909010972.jpg]: /images/20220719/e6d56ceef5ff46a09fbec2a0386eef52.png
[Link 1]: http://files.cnblogs.com/doudougou/HTML5MusicPlayer.rar