前台页面HTML5的Audio音频标签学习使用_前端audio在线网址-程序员宅基地

原文链接：http://caibaojian.com/html5-audio.html

HTML5中的新元素标签

src：音频文件路径。
autobuffer：设置是否在页面加载时自动缓冲音频。
autoplay：设置音频是否自动播放。
loop：设置音频是否要循环播放。
controls：属性供添加播放、暂停和音量控件。

这些属性和<video>元素标签的属性很类似

如何工作

<audio src="song.mp3"></audio>

同样 <audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：·

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

常用的控制函数：

load()：加载音频、视频软件
play()：加载并播放音频、视频文件或重新播放暂停的的音频、视频
pause()：暂停出于播放状态的音频、视频文件
canPlayType(obj)：测试是否支持给定的Mini类型的文件

只读的媒体属性：

duration获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
paused如果媒体文件被暂停，则返回true，否则返回false
ended如果媒体文件播放完毕，则返回true
startTime返回起始播放时间
error返回错误代码
currentSrc以字符串形式返回正在播放或已加载的文件

可脚本控制的属性值：

autoplay：自动播放已经加载的的媒体文件
loop为true：的时候则设定为自动播放
currentTime：以s为单位返回从开始播放到目前所花的时间
controls：显示或者隐藏用户控制界面
volume：音量值,从0.0至1.0之间
muted：设置是否静音
autobuffer：是否进行缓冲加载

"我"的成长独白 ESTELLE'S AUDIO PLAYER

首先，先介绍一下"我"自己，和你一样，我也是有生命的个体，但 (ke) 是 (xi) ，我比你更有灵性 [ 傲娇 ]

audio.html

<body>

<audio id='audio'>你的浏览器不支持喔！</audio>

<div class='MusicPanel'>
<div class='PanelLeft'><div class='circle'><span class='icon glyphicon-heart'></span></div></div> <!-- Like Button -->

<div class='PanelRight'>
<div class='Prev'><span class='icon glyphicon-step-backward'></span></div> <!-- Prev Song Button -->
<div id='Play' class='Play'><span class='icon glyphicon-play'></span></div> <!-- Play & Pause Button -->
<div class='Next'><span class='icon glyphicon-step-forward'></span></div> <!-- Next Song Button -->
<div class="Song"><span class='SongAuthor'>Greyson Chance</span></br><span class='SongName'>Summertrain</span></div> <!-- Song Title -->

<div class="Process"> <!-- Process -->
<div class="ProcessAll" ></div> <!-- ProcessAll -->
<div class="ProcessNow"></div> <!-- ProcessNow -->
<div class="SongTime">00:00&nbsp;|&nbsp;00:00</div> <!-- Time -->
</div> <!-- Process End -->
</div> <!-- PanelRight End -->
</div> <!-- MusicPanel End -->

</body>

进度条逻辑

绘制两条重叠的进度条，一条指示总进度 ProcessAll，另一条指示已播放的进度 ProcessNow
根据已播放的时间占总时间比，设置 ProcessNow 下 Width 的值，根据CSS的层叠规范，后写的 ProcessNow 的颜色层在最高层

详见 audio.js 函数 TimeSpan()

其次，我不能不穿衣服呀，我需要一件合适的袈裟，人见人爱，花见花开，车见车那啥儿，嘿嘿

audio.css

//code from http://caibaojian.com/html5-audio.html
.MusicPanel{
    width: 400px;
    height: 100px;
    margin: 0 auto;
    border:1px solid #76dba3;
}
.MusicPanel .PanelLeft{
    width: 100px;
    height: 100px;
    display: inline-block;
    text-align: center;
    background: #76dba3;
}
.MusicPanel .PanelRight{
    width: 260px;
    height: 80px;
    display: inline-block;
    padding: 10px 20px;
    position: absolute;
    background: #fdfef6;
}
.Prev,.Play,.Next{
    display: inline-block;
    margin-right: 5px;
}
.Prev,.Next{
    filter:alpha(opacity=30); 
    -moz-opacity:0.3; 
    opacity:0.3;
    cursor: not-allowed;
}
.Prev:hover,.Next:hover{
    filter:alpha(opacity=30); 
    -moz-opacity:0.3; 
    opacity:0.3;
    cursor: not-allowed;
}
.Song{
    display: inline-block;
    padding-left: 15px;
}
.SongTime{
    float: right;
    font-family: cursive,microsoft Yahei;
    font-size: 14px;
    color:#ee8a87;
}
.Song:hover{
    cursor: default;
}
.SongAuthor{
    font-family: cursive,microsoft Yahei;
    color:#ee8a87;
    font-size: 18px;
}
.SongName{
    font-family: cursive,microsoft Yahei;
    color:#ee8a87;
    font-size: 13px;
}
.PanelRight .icon{
    display: inline-block;
    color:#f06d6a;
    font-size:22px;
    transition:0.3s;
}
.PanelRight .Play .icon:hover {
    cursor: pointer;
    color: #dd2924;
}

.PanelLeft .circle{
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-top: 30%;
    line-height: 40px;
    border-radius: 50%; 
    border:1px solid white;
    transition:0.3s;
}
.icon{
    font-family: "Glyphicons Halflings";
}
.circle span{
    color:white;
    font-size: 14px;
    transition:0.05s;
}
.circle:hover{
    cursor: pointer;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.6), 0px 2px 10px 0px rgba(0, 0, 0, 0.4);
    background: #f06d6a;
    border:1px solid #f06d6a;
}
.circle:hover span{
    font-size: 18px;
}
.Process{
    margin-top: 15px;
}
.ProcessAll{
    width: 260px;
    float: left;
    height: 3px;
    cursor: pointer;
    background-color:rgba(0,0,0,0.2);   
}
.ProcessNow{
    width: 0px;
    float: left;
    position: absolute;
    height: 3px;
    cursor: pointer;
    background-color:#f06d6a;   
}

有了身体，也穿了袈裟，现在的我仍然只是一个空壳，束缚自由，无法行动 [ 想哭 ]
"我" 还需要 JS 作为权杖，让我能够行走，或者给我一匹 JQuery，让我能够策马扬鞭，驰骋沙场，很高兴的是，我拥有了后者 [ 骄傲 ]

audio.js

$(document).ready(function() {

    var audio = document.getElementById("audio");
    audio.src = "/demo/summertrain.mp3";

    $("#Play").on('click',function () {
        if(audio.paused){
            if( $(this).children().hasClass('glyphicon-play') ) {
                $("#Play").children("span").removeClass("glyphicon-play").addClass("glyphicon-pause");
                Play();
                }
            }
        else{
            $("#Play").children("span").removeClass("glyphicon-pause").addClass("glyphicon-play");
            Pause();
            }           
    });// Button cilick
        
    function Play() {
        audio.play();
        TimeSpan();
    } //Play()

    function Pause() {
        audio.pause();
    } //Pause()

    function TimeSpan() {
        var ProcessNow = 0;
        setInterval(function () {
            var ProcessNow = (audio.currentTime / audio.duration) * 260;
            $(".ProcessNow").css("width", ProcessNow);
            var currentTime = timeFormat(audio.currentTime);
            var timeAll = timeFormat(TimeAll());
            $(".SongTime").html(currentTime + " | " + timeAll);
            }, 1000);
    }  //TimeSpan()

    function timeFormat(number) {
        var minute = parseInt(number / 60);
        var second = parseInt(number % 60);
        minute = minute >= 10 ? minute : "0" + minute;
        second = second >= 10 ? second : "0" + second;
        return minute + ":" + second;
    } //timeFormat()

    function TimeAll() {
        return audio.duration; 
    } //TimeAll()

})

"纽扣" ( ICON ) 是定制的Bootstrap，多亏了定制，不然的话得又得重新修补袈裟累成狗 [舒口气]

This is me，sa flowers，papapapa ~

Let's Enjoy ：Where did you go

附录：

Audio 对象属性

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象。
autoplay	设置或返回是否在就绪（加载完成）后随即播放音频。
buffered	返回表示音频已缓冲部分的 TimeRanges 对象。
controller	返回表示音频当前媒体控制器的 MediaController 对象。
controls	设置或返回音频是否应该显示控件（比如播放/暂停等）。
crossOrigin	设置或返回音频的 CORS 设置。
currentSrc	返回当前音频的 URL。
currentTime	设置或返回音频中的当前播放位置（以秒计）。
defaultMuted	设置或返回音频默认是否静音。
defaultPlaybackRate	设置或返回音频的默认播放速度。
duration	返回音频的长度（以秒计）。
ended	返回音频的播放是否已结束。
error	返回表示音频错误状态的 MediaError 对象。
loop	设置或返回音频是否应在结束时再次播放。
mediaGroup	设置或返回音频所属媒介组合的名称。
muted	设置或返回是否关闭声音。
networkState	返回音频的当前网络状态。
paused	设置或返回音频是否暂停。
playbackRate	设置或返回音频播放的速度。
played	返回表示音频已播放部分的 TimeRanges 对象。
preload	设置或返回音频的 preload 属性的值。
readyState	返回音频当前的就绪状态。
seekable	返回表示音频可寻址部分的 TimeRanges 对象。
seeking	返回用户当前是否正在音频中进行查找。
src	设置或返回音频的 src 属性的值。
textTracks	返回表示可用文本轨道的 TextTrackList 对象。
volume	设置或返回音频的音量。

Audio 对象方法

方法	描述
addTextTrack()	向音频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的音频类型。
fastSeek()	在音频播放器中指定播放时间。
getStartDate()	返回新的 Date 对象，表示当前时间线偏移量。
load()	重新加载音频元素。
play()	开始播放音频。
pause()	暂停当前播放的音频。

来源：前端开发博客

本文链接：https://blog.csdn.net/ghjzzhg/article/details/86087019

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

vivo是安卓手机吗_win10支持手机吗 win10支持打开安卓APP手机名单汇总-程序员宅基地

文章浏览阅读154次。win10支持手机吗 win10支持打开安卓APP手机名单汇总本周推出新一代Galaxy Note20、Z Fold 2折叠屏手机的同时，三星与微软也做了一些软件上的联动。简单来说，通过Windows 10上的“Your Phone(你的手机)”APP，可以在连接到三星手机后，直接运行手机内安装的安卓APP，界面体验和原生APK一致。甚至，你可以将常用APK固定到任务栏中，每一款APP都会在单独新..._vivo手机windows10设备支持状态

colcon build --merge-install --packages-select cpp_srvcli报错-程序员宅基地

文章浏览阅读153次。原因：未初始化工作环境。_colcon build --merge-install

MSB4019找不到导入的项目“E:\VS2019\HalconCpp_x64.props”。请确认 Import 声明“E:\VS2019\HalconCpp_x64.props”中的表达式正确_严重性代码说明项目文件行禁止显示状态错误 msb4019 找不到导入的项目“e:-程序员宅基地

文章浏览阅读1.3k次，点赞3次，收藏4次。电脑上运行从其他电脑拷贝过来的程序，报错；报错原因：HalconCpp_x64.props是原代码中配置的属性文件，拷贝过来路径不对，因此找不到；解决方法：使用写字板打开出错文件.vcxproj后缀名的文件（尝试使用VS，但是无法打开），找到出错的72行，<Import Project="D:\HalconCpp_x64.props" />，将文件HalconCpp_x64.props的路径改为现有路径：Project="..\..\..\Halcon_CPP\..._严重性代码说明项目文件行禁止显示状态错误 msb4019 找不到导入的项目“e:

java遍历一个map_java中遍历一个Map-程序员宅基地

文章浏览阅读72次。java中遍历一个MapMap map = new HashMap();Iterator iter = map.entrySet().iterator();while (iter.hasNext()) {Map.Entry entry = (Map.Entry) iter.next();Object key = entry.getKey();Object val = entry.getValue(..._map java 遍历

PDF转换成图片_c++开源pdf转图片-程序员宅基地

文章浏览阅读8.9k次，点赞2次，收藏17次。最近公司安排了个任务：要求交付一个DLL，实现【PDF转换成图片】，最好的效果是能够掌握所有源码，实在不行才交付第三方DLL。研究了6个工作日+1双休+每晚9点下班，逛遍了国内外各种论坛，还是没能成功整出源码，但发现了很多有用的工具和其他工具，在此分享给大家。1.【iTextSharp.dll】，C# 开源PDF处理工具，可以任意操作PDF，并可以提取PDF中的文字和图片，但不能直接将PDF转_c++开源pdf转图片

python logger.debug_Python logger模块-程序员宅基地

文章浏览阅读629次。1 logging模块简介logging模块是Python内置的标准模块，主要用于输出运行日志，可以设置输出日志的等级、日志保存路径、日志文件回滚等；相比print，具备如下优点：可以通过设置不同的日志等级，在release版本中只输出重要信息，而不必显示大量的调试信息；print将所有信息都输出到标准输出中，严重影响开发者从标准输出中查看其它数据；logging则可以由开发者决定将信息输出到什么..._python logging debug

随便推点

命令代码含义_指令代码是什么意思-程序员宅基地

文章浏览阅读839次。#define CMD_RIGHT_ID 0x41//#define CMD_SYS_REST 0x55//软件复位#define CMD_DIS_JLINK 0X56//失能jlink#define CMD_EN_JLINK 0X57//使能jlink#define CMD_MPU_FAIL 0x58//mpu9250³õÊ¼»¯´íÎó#define CM..._指令代码是什么意思

centos搭建单机伪分布式MongoDB集群_mongodb-src-程序员宅基地

文章浏览阅读2.2k次。centos搭建单机伪分布式MongoDB集群一、实验任务要求使用一台虚拟机搭建伪分布式的MongoDB集群。集群有六台机器，分成六个副本集，S1,S2,S3,S4,S5,S6，每个副本集分三个节点。同一副本集中的节点有一个主节点，两个从节点，从节点的数据与主节点一致；OS为mongos进程（路由服务器）；C为config server（配置服务器），设置了三个配置服务器。熟悉使用MongoDB的增删改查操作。1.安装与配置（1）首先，从官网上下载好安装包解压到opt文件夹，命名为mongodbt_mongodb-src

linux中top中vsz博客,linux top 命令-程序员宅基地

文章浏览阅读5.9k次。Linux下提供top、ps命令查看当前cpu、mem使用情况，简要介绍如下：一、使用ps查看进程的资源占用ps -aux查看进程信息时，第三列就是CPU占用。[root@localhost utx86]# ps -aux | grep my_processWarning: bad syntax, perhaps a bogus '-'? See/usr/share/doc/procps-3.2...._top vsz

华为p30怎么升级鸿蒙系统_华为p30如何刷鸿蒙-程序员宅基地

文章浏览阅读1.2w次。自从华为公布了鸿蒙系统的公测后，华为各型号的手机也是陆续接收到公测的推送，而华为p30手机也可以尝试鸿蒙系统了。有使用华为pa30的小伙伴想了解p30怎么升级鸿蒙系统，下面小编就给大家讲下华为p30升级鸿蒙系统的方法。方法一：1、大家只需要进入系统设置，找到系统和更新。2、进入系统和更新后再点击“软件更新”就可以更新到鸿蒙系统了。方法二：1、如果第一种没看到的话，可以在手机之中找到“我的华为”APP，如果你没找到的话可以选择去华为应用市场里下一个我的华为。2、找到打开之后_华为p30如何刷鸿蒙

“交叉引用”这个word自带功能，帮我们自动管理毕业论文的参考文献标注！_交叉引用文献的作用-程序员宅基地

文章浏览阅读1.8k次，点赞4次，收藏5次。本着“持续学习”的思想，我想 word 这么强大的工具，一定有自动为我们的参考文献标注顺序并在正文中建立链接的功能。在网上搜索了一番资料，我改进整理于此，希望能为你们的毕业论文排版过程节省时间。_交叉引用文献的作用

重学STM32---（十） ——CAN通信(二)-程序员宅基地

文章浏览阅读370次。　　　CAN协议是非常难的，但是在stm32中却是简单的，只需要我们配置寄存器即可，，，即使这样，我在学习的时候也遇到了许多困难1.开时钟,不用说2.设置GPIO口，，CAN_TX复用推挽输出，CAN_RX上拉或浮空输入3.CAN初始化了，分三步（1）一般设置 /*对CAN初始化*/ CAN1->MCR |= 1 << 15; ..._can->flagrto