HTML5用audio标签做一个最简单的音频播放器

最新推荐文章于 2024-07-27 10:32:09 发布

邱慕夏

最新推荐文章于 2024-07-27 10:32:09 发布

阅读量1.4w

点赞数 8

分类专栏： ——【JavaScript】文章标签： audio html5 音频播放器

本文链接：https://blog.csdn.net/qiumuxia0921/article/details/49454017

版权

在做系统的时候，要求做一个音频播放器，就在网上查找了一些资料，发现这样的资料还是很千篇一律的，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