搜索
首页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
    HTML5的遗产:当前了解H5HTML5的遗产:当前了解H5Apr 10, 2025 am 09:28 AM

    HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

    H5代码:可访问性和语义HTMLH5代码:可访问性和语义HTMLApr 09, 2025 am 12:05 AM

    H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构,提高SEO。2.ARIA属性如aria-label增强可访问性,辅助技术用户可顺利使用网页。

    H5与HTML5相同吗?H5与HTML5相同吗?Apr 08, 2025 am 12:16 AM

    "h5"和"HTML5"在大多数情况下是相同的,但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准,包含新标签和API。2."h5"通常是HTML5的简称,但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

    H5的功能是什么?H5的功能是什么?Apr 07, 2025 am 12:10 AM

    H5,即HTML5,是HTML的第五个版本,它为开发者提供了更强大的工具集,使得创建复杂的网页应用变得更加简单。H5的核心功能包括:1)元素允许在网页上绘制图形和动画;2)语义化标签如、等,使网页结构清晰,利于SEO优化;3)新API如GeolocationAPI,支持基于位置的服务;4)跨浏览器兼容性需要通过兼容性测试和Polyfill库来确保。

    h5链接怎么做h5链接怎么做Apr 06, 2025 pm 12:39 PM

    如何创建 H5 链接?确定链接目标:获取 H5 页面或应用程序的 URL。创建 HTML 锚点:使用 <a> 标记创建锚点并指定链接目标URL。设置链接属性(可选):根据需要设置 target、title 和 onclick 属性。添加到网页:将 HTML 锚点代码添加到希望链接出现的网页中。

    h5兼容问题怎么解决h5兼容问题怎么解决Apr 06, 2025 pm 12:36 PM

    解决 H5 兼容问题的方法包括:使用响应式设计,允许网页根据屏幕尺寸调整布局。采用跨浏览器测试工具,在发布前测试兼容性。使用 Polyfill,为旧浏览器提供对新 API 的支持。遵循 Web 标准,使用有效的代码和最佳实践。使用 CSS 预处理器,简化 CSS 代码并提高可读性。优化图像,减小网页大小并加快加载速度。启用 HTTPS,确保网站的安全性。

    h5怎么生成链接h5怎么生成链接Apr 06, 2025 pm 12:33 PM

    h5页面可以通过两种方法生成链接:手动创建链接或使用短链接服务。通过手动创建,只需复制h5页面的URL即可;通过短链接服务,需将URL粘贴到服务中,然后获取缩短的URL。

    h5分享页面怎么做h5分享页面怎么做Apr 06, 2025 pm 12:30 PM

    制作引人入胜的 H5 分享页面至关重要,旨在提升参与度、产生潜在客户和增加品牌知名度。步骤包括:确定目标受众、设计引人注目的视觉效果、创建引人入胜的内容、添加互动元素、优化社交媒体分享,以及测试并改进。

    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脱衣机

    AI Hentai Generator

    AI Hentai Generator

    免费生成ai无尽的。

    热门文章

    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    3 周前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最佳图形设置
    3 周前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.如果您听不到任何人,如何修复音频
    3 周前By尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25:如何解锁Myrise中的所有内容
    3 周前By尊渡假赌尊渡假赌尊渡假赌

    热工具

    SecLists

    SecLists

    SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    Dreamweaver CS6

    Dreamweaver CS6

    视觉化网页开发工具

    Atom编辑器mac版下载

    Atom编辑器mac版下载

    最流行的的开源编辑器

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用