<div>
<audio>
<source src="../audio/gejin.mp3" type="audio/mp3">
</audio>
<div><img id="audioPlayer" src="../img/Group 4 Copy.png"></div>
<div>
<p style="max-width: 536px;">上帝视角看民宿产业 - 马化腾</p>
<div id="progressBarBg"><span id="progressDot"></span>
<div id="progressBar"></div>
</div>
<div><span id="audioCurTime">00:00</span><span>01:06</span></div>
</div>
</div>

在firefox、IE、中都有效，但是在chrome中无效，
原因：这是一个与服务器有关的chrome报错
解决方案：
1、将的src引用的视频最好是在线网站视频完整引用地址 //（亲自测试有效），查找在线音乐地址的方法：输入music.163.com打开，搜索音乐，如《偏爱》，右键查看元素，Network-->Media-->点击Name下的资源，复制右边Headers/General的request url，然后复制到src。
2、测试用的音频是本地地址，把音频/视频放到服务器，使用//的播放地址就不再出现这个问题了。

具体来说，使用Intellij IDEA自带的服务器时（即IDEA直接打开html文件，鼠标移到编辑器的右上区域，出现一个有若干浏览器图标的横条，点击chrome图标，会使用idea自带的文件服务器用chrome打开，端口是63342），在chrome下拖动进度条也会出现跳到开头0S重新播放的问题，用IE11却正常。
然后我试了另外一个hfs服务器（Http file server，是一个软件，并不是tomcat apache nginx之类的一个新的服务器，正好有这个软件顺便试一下），chrome下拖动完全正常。所以猜测原因是和服务器有关，具体来说可能是下载mp3文件时的http response header有关。下面是以上两种服务器的response header:
【IDEA自带服务器】

HTTP/1.1 200 OK
Content-Type: audio/mpeg
server: IntelliJ IDEA 14.1.7
date: Thu, 02 Feb 2017 12:03:10 GMT
X-Frame-Options: SameOrigin
X-Content-Type-Options: nosniff
x-xss-protection: 1; mode=block
cache-control: private, must-revalidate
last-modified: Sat, 28 Jan 2017 14:37:02 GMT
content-length: 3694385

【hfs服务器】

HTTP/1.1 200 OK
Content-Type: application/octet-stream
Content-Length: 3694385
Accept-Ranges: bytes
Server: HFS 2.3d
Last-Modified: Sat, 28 Jan 2017 14:37:02 GMT
Content-Disposition: attachment; filename="%CB%B3%C1%F7%B6%F8%CF%C2 - %D5%C5%F6%A6%D3%B1 %CD%F2%BC%D2%C3

本文由职坐标整理发布，关注HTML5/CSS3频道，学习更多的前端知识！