在做系统的时候,要求做一个音频播放器,就在网上查找了一些资料,发现这样的资料还是很千篇一律的,EasyUI框架并没有给我们一个音频播放器的功能,在bootstrap上有,但是也是结合html5来写的,因此,我们在这里就用纯的html5血一个音频播放器,如何播放本地的音频。
首先,大家在myeclipse上建立一个自己的web项目:
其实,这里的代码都不难,主要的问题出在,自己没有弄明白jsp界面上引用的js和css的文件目录,我将我们用到的音频文件放在了avatar文件下面,因为这里用到的“http://file.dengo.org/music/cyx_ds.mp3”,一直播放不了,因此我就用本地的音频试试,就还好, 基本代码:
testEar.jsp:
<span style="font-size:18px;"><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>最简单的音频播放器</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="/TestEar/testEar/css/style.css">
</head>
<body>
<div class="music_wrap">
<div class="control">
<div class="option">
<div class="time">-00:00</div>
<div class="volume" title="音量">
<p></p>
</div>
<div class="volume_wrap hidden">
<div class="volume_bar">
<div class="volume_now"></div>
</div>
</div>
</div>
<div class="progress_bar" id="bar">
<div class="progress"></div>
<div class="buffer"></d