搜索
首页web前端H5教程HTML5制作酷炫音频播放器插件图文教程_html5教程技巧

上图便是这个音频播放器的UI界面图,里面还隐藏了一个歌曲的播放列表。整个播放器的UI除了大背景的人像图和歌曲的星星评分使用了图片其他全部由CSS和font-face绘制而成,看上去有难度的地方就只有CD和打碟器的制作了,在歌曲播放时CD和打碟器都是具有动画交互效果的,这个在后面的部分会讲解到。点击播放器的CD可以打开播放列表噢~

因为这一期的教程主要是为了展示Html5新增的

主要功能:

一、播放、暂停、上一首、下一首、音量增减

二、点击CD可以打开和关闭播放列表

三、可以拖动本地音乐文件到播放器进行播放

Html结构


复制代码
代码如下:










    e
    c
    d


    0:00



    0:00



    audio标签

    在上面的结构中我们可以发现这个html5新增的audio标签,它具有一个controls属性,顾名思义它是播放器的控制器,controls 属性规定浏览器为音频提供播放控件,例如在chrome浏览器下的audio标签中设置该属性,播放器就会以如下的形式出现,如果不设置该属性,则会是空白一片


    复制代码
    代码如下:

    但由于在不同浏览器下的对audio标签渲染效果不一,这种简易的方法并不适合在跨浏览器下的使用,并且浏览器默认的播放器控件所提供的功能实在是太少了。。所以我们一般通过不设置该属性的方法来隐藏浏览器的默认播放控件,并且手工加入额外的标签和样式来定制播放器的UI界面。

    播放控制

    在播放器的UI界面绘制完成后,首先我们需要做的是为播放、上一首、下一首这三个主要的控制按钮添加对应的事件监听。


    复制代码
    代码如下:

    var myAudio = $("#myAudio audio")[0];
    var $sourceList = $("#myAudio source");
    var currentSrcIndex = 0;
    var currentSr = "";


    复制代码
    代码如下:

    $(".btn_play").click(function(){
    if (myAudio.paused) {
    myAudio.play();
    } else {
    myAudio.pause();
    }
    });
    $(".btn_next").click(function(){
    ++currentSrcIndex > $sourceList.length - 1 && (currentSrcIndex = 0);
    currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
    myAudio.src = currentSrc;
    myAudio.play();
    });
    $(".btn_previous").click(function(){
    --currentSrcIndex currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
    myAudio.src = currentSrc;
    myAudio.play();
    });

    上述的按钮点击的事件监听中,我们通过调用原始的audio元素的play()和pause()方法来控制音频的播放和暂停。另外audio元素提供了currentSrc属性,该属性表示当前播放文件的文件源,我们通过设置该属性来控制当前播放的歌曲曲目。

    音量控制

    接下来我们来对音量条两边的两个小喇叭添加事件监听,使得通过点击左右两个小喇叭可以减小和增加当前播放的音量。要设置播放器的音量,我们可以调用audio元素中所提供的volume属性。volume值最大为1,最小为0,在这里我们通过每次点击喇叭增减0.1的音量来实现音量的控制。当然你也可以使用别的值。但要注意的是javascript语言不能对小数提供精准的控制,所以每次减少0.1的音量时实际上减少的音量是稍微地大于0.1的,这导致当连续点击9次音量减少的按钮时剩下0.09xxxx的音量,然后你会发现播放器怎么无法静音了。。。当然这个问题是很容易解决的(如下所示),只是稍作提醒。


    复制代码
    代码如下:

    $(".volume_control .decrease").click(function() {
    var volume = myAudio.volume - 0.1;
    volume myAudio.changeVolumeTo(volume);
    });
    $(".volume_control .increase").click(function() {
    var volume = myAudio.volume + 0.1;
    volume > 1 && (volume = 1);
    myAudio.changeVolumeTo(volume);
    });

    另外我们还需要实现使用滑动器或者点击音量条某一位置来调控音量的功能,有了上面的基础,这个就容易完成了。首先我们来看看点击音量条某一位置来调控音量的功能:点击音量条的某一位置,计算该由音量条的起点到该位置的长度值,再用该值除以总的音量条长度(在这里是100)得到百分比值,再用该百分比值乘以最大音量值1得到所要跳跃到的音量值,再赋值给volume。通过滑动器来调控音量的方法实现也与此类似,主要是要懂得如何计算滑动器在音量条的位置值。在此就不做详细解释,有问题可以下方留言。


    复制代码
    代码如下:

    $(".volume_control .base_bar").mousedown(function(ev){
    var posX = ev.clientX;
    var targetLeft = $(this).offset().left;
    var volume = (posX - targetLeft)/100;
    volume > 1 && (volume = 1);
    volume myAudio.changeVolumeTo(volume);
    });
    $(".volume_control .slider").mousedown(starDrag = function(ev) {
    ev.preventDefault();
    var origLeft = $(this).position().left; /*滑块初始位置*/
    var origX = ev.clientX; /*鼠标初始位置*/
    var target = this;
    var progress_bar = $(".volume_control .progress_bar")[0];
    $(document).mousemove(doDrag = function(ev){
    ev.preventDefault();
    var moveX = ev.clientX - origX; /*计算鼠标移动的距离*/
    var curLeft = origLeft + moveX; /*用鼠标移动的距离表示滑块的移动距离*/
    (curLeft (curLeft > 93) && (curLeft = 93);
    target.style.left = curLeft + "px";
    progress_bar.style.width = curLeft + 7 + "%";
    myAudio.changeVolumeTo((curLeft + 7)/100);
    });
    $(document).mouseup(stopDrag = function(){
    $(document).unbind("mousemove",doDrag);
    $(document).unbind("mouseup",stopDrag);
    });
    });

    时间控制

    好了,现在播放器已经基本能用了,但我们还希望能够直接跳过音频的一部分到特定的时间点。那么要怎么实现呢??!制定标准的委员们也不是傻子,这种常用的功能是不会有所疏漏的拉~所以赶紧翻翻API吧,你会发现audio元素提供了一个名为currentTime的属性,非常简明易懂的名称(其实大多属性都是很好理解的),设置该属性可以设置当前播放的时间点。

    在这里,我们还需要使用audio的另一个属性duration,该属性指的是当前播放文件的总时间长度。因此根据音量控制的实现,我们可以这样做:

    一、点击进度条的某一位置,计算该由进度条的起点到该位置的长度占总进度条长度的百分比值(例如点击进度条的正中间位置,则进度条的起点到该位置的长度占总进度条长度的50%),记为percentage。

    二、然后用percentage乘以文件的总时间长度duration就得到了你想要跳跃到的时间点的值,再把该值赋给currentTime即完成了所要实现的功能。


    复制代码
    代码如下:

    $(".time_line .base_bar").mousedown(function(ev){
    var posX = ev.clientX;
    var targetLeft = $(this).offset().left;
    var percentage = (posX - targetLeft)/140 * 100;
    myAudio.currentTime = myAudio.duration * percentage / 100;
    });

    到这里,播放器已经基本成型了。剩下一些无关痛痒(其实对我来说才是最重要的哈哈)的UI交互实现,如果大家有兴趣的话就到源码中查看吧,有问题可以在下方评论留言,希望能多多交流和学习。

    声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    H5和HTML5之间的连接:相似性和差异H5和HTML5之间的连接:相似性和差异Apr 24, 2025 am 12:01 AM

    H5和HTML5是不同的概念:HTML5是HTML的一个版本,包含新元素和API;H5是基于HTML5的移动应用开发框架。HTML5通过浏览器解析和渲染代码,H5应用则需要容器运行并通过JavaScript与原生代码交互。

    H5代码的基础:密钥元素及其目的H5代码的基础:密钥元素及其目的Apr 23, 2025 am 12:09 AM

    HTML5的关键元素包括、、、、、等,用于构建现代网页。1.定义头部内容,2.用于导航链接,3.表示独立文章内容,4.组织页面内容,5.展示侧边栏内容,6.定义页脚,这些元素增强了网页的结构和功能性。

    HTML5和H5:了解常见用法HTML5和H5:了解常见用法Apr 22, 2025 am 12:01 AM

    HTML5和H5没有区别,H5是HTML5的简称。1.HTML5是HTML的第五个版本,增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用,适用于各种移动设备。

    HTML5:现代网络的基础(H5)HTML5:现代网络的基础(H5)Apr 21, 2025 am 12:05 AM

    HTML5是超文本标记语言的最新版本,由W3C标准化。HTML5引入了新的语义化标签、多媒体支持和表单增强,提升了网页结构、用户体验和SEO效果。HTML5引入了新的语义化标签,如、、、等,使网页结构更清晰,SEO效果更好。HTML5支持多媒体元素和,无需第三方插件,提升了用户体验和加载速度。HTML5增强了表单功能,引入了新的输入类型如、等,提高了用户体验和表单验证效率。

    H5代码:编写清洁有效的HTML5H5代码:编写清洁有效的HTML5Apr 20, 2025 am 12:06 AM

    如何写出干净高效的HTML5代码?答案是通过语义化标签、结构化代码、性能优化和避免常见错误。1.使用语义化标签如、等,提升代码可读性和SEO效果。2.保持代码结构化和可读性,使用适当缩进和注释。3.优化性能,通过减少不必要的标签、使用CDN和压缩代码。4.避免常见错误,如标签未闭合,确保代码有效性。

    H5:如何增强网络上的用户体验H5:如何增强网络上的用户体验Apr 19, 2025 am 12:08 AM

    H5通过多媒体支持、离线存储和性能优化提升网页用户体验。1)多媒体支持:H5的和元素简化开发,提升用户体验。2)离线存储:WebStorage和IndexedDB允许离线使用,提升体验。3)性能优化:WebWorkers和元素优化性能,减少带宽消耗。

    解构H5代码:标签,元素和属性解构H5代码:标签,元素和属性Apr 18, 2025 am 12:06 AM

    HTML5代码由标签、元素和属性组成:1.标签定义内容类型,用尖括号包围,如。2.元素由开始标签、内容和结束标签组成,如内容。3.属性在开始标签中定义键值对,增强功能,如。这些是构建网页结构的基本单位。

    了解H5代码:HTML5的基本原理了解H5代码:HTML5的基本原理Apr 17, 2025 am 12:08 AM

    HTML5是构建现代网页的关键技术,提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等,增强了网页结构和SEO。2.支持多媒体元素和,无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性,简化了验证过程。4.提供了离线和本地存储功能,提升了网页性能和用户体验。

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

    热工具

    螳螂BT

    螳螂BT

    Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

    EditPlus 中文破解版

    EditPlus 中文破解版

    体积小,语法高亮,不支持代码提示功能

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    功能强大的PHP集成开发环境

    安全考试浏览器

    安全考试浏览器

    Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)