我的编程空间,编程开发者的网络收藏夹
学习永远不晚

利用HTML5制作音频播放器插件

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

利用HTML5制作音频播放器插件

这篇文章主要讲解了“利用HTML5制作音频播放器插件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“利用HTML5制作音频播放器插件”吧!

利用HTML5制作音频播放器插件

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

因为这一期的教程主要是为了展示Html5新增的<audio>标签和audio元素的Dom API的使用,所以播放器UI的绘制在这里就不详细解释了,有疑问的可以自行查看案例的CSS文件的注释或者在下方留言。

主要功能:

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

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

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

Html结构


代码如下:


<div id="myAudio" >
 <audio>
   <source title="王若琳 - Wild World.mp3" class="lazy" data-src="<a href="http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3">http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3</a>" />
   <source title="韦礼安 - 还是会.mp3" class="lazy" data-src="<a href="http://stream18.qqmusic.qq.com/31005070.mp3">http://stream18.qqmusic.qq.com/31005070.mp3</a>" />
   <source title="王若琳 - Lost in paradise.mp3" class="lazy" data-src="<a href="http://stream12.qqmusic.qq.com/30416842.mp3">http://stream12.qqmusic.qq.com/30416842.mp3</a>" />
 </audio>
 <div class="music_info clearfix">
   <div class="cd_holder"><span class="stick"></span><div class="cd"></div></div>
   <div class="meta_data">
     <span class="title"></span>
     <div class="rating">
       <div class="starbar">
         <ul class="current-rating" data-score="85">
           <li class="star5"></li>
           <li class="star4"></li>
           <li class="star3"></li>
           <li class="star2"></li>
           <li class="star1"></li>
         </ul>
       </div>
     </div>
     <div class="volume_control">
       <a class="decrease">a</a>
       <span class="base_bar">
         <span class="progress_bar"></span>
         <a class="slider"></a>
       </span>
       <a class="increase">b</a>
     </div>
   </div>
 </div>
 <ul class="music_list"></ul>
 <div class="controls">
   <div class="play_controls">
     <a class="btn_previous">e</a>
     <a class="btn_play">c</a>
     <a class="btn_next">d</a>
   </div>
   <div class="time_line">
     <span class="passed_time">0:00</span>
     <span class="base_bar">
       <span class="progress_bar"></span>
     </span>
     <span class="total_time">0:00</span>
   </div>
 </div>
</div>

audio标签

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

代码如下:

<audio controls class="lazy" data-src="xxx.mp3"></audio>

利用HTML5制作音频播放器插件

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

播放控制

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

代码如下:


var myAudio = $("#myAudio audio")[0];
var $sourceList = $("#myAudio source");
var currentclass="lazy" data-srcIndex = 0;
var currentSr = "";

代码如下:


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

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

音量控制

接下来我们来对音量条两边的两个小喇叭添加事件监听,使得通过点击左右两个小喇叭可以减小和增加当前播放的音量。要设置播放器的音量,我们可以调用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 < 0 && (volume = 0);
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 < 0 && (volume = 0);
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 < -7) && (curLeft = -7);
 (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;
});

感谢各位的阅读,以上就是“利用HTML5制作音频播放器插件”的内容了,经过本文的学习后,相信大家对利用HTML5制作音频播放器插件这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

利用HTML5制作音频播放器插件

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

如何在HTML5中使用video.js视频播放插件

本篇文章给大家分享的是有关如何在HTML5中使用video.js视频播放插件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。看下默认例子:controls表示控制条,prload
2023-06-09

利用java怎么制作一个视频播放器

今天就跟大家聊聊有关利用java怎么制作一个视频播放器,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。建立普通maven项目,添加vlcj的依赖
2023-05-31

利用 GetUserMedia 和 MediaRecorder API 玩转音频录制、播放和下载

GetUserMedia​ 和 MediaRecorder 为网页端带来了强大的媒体处理能力。通过它们,现在我们可以方便地在网页中实现录音、音频效果处理以及实时语音通话等功能了。

怎么使用qt制作音乐播放器

要使用Qt制作音乐播放器,您可以按照以下步骤进行:1. 首先,确保已经安装了Qt开发环境。您可以从Qt官方网站上下载并安装Qt,确保选择与您的操作系统兼容的版本。2. 创建一个新的Qt项目。在Qt Creator中,选择“新建项目”并选择“
2023-08-09

Flutter中视频播放器插件如何使用

这篇文章主要讲解了“Flutter中视频播放器插件如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Flutter中视频播放器插件如何使用”吧!创建一个新的视频播放器在使用视频播放器插件
2023-06-29

怎么在Vue中利用node实现音频录制播放功能

本篇文章给大家分享的是有关怎么在Vue中利用node实现音频录制播放功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。vue部分:安装recorderxcnpm install
2023-06-14

Python中怎么使用PyQT制作视频播放器

本篇内容主要讲解“Python中怎么使用PyQT制作视频播放器”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Python中怎么使用PyQT制作视频播放器”吧!视频播放器先把已经完成的代码放出来。
2023-06-02

Python应用03 使用PyQT制作视频播放器实例

最近研究了Python的两个GUI包,Tkinter和PyQT。这两个GUI包的底层分别是Tcl/Tk和QT。相比之下,我觉得PyQT使用起来更加方便,功能也相对丰富。这一篇用PyQT实现一个视频播放器,并借此来说明PyQT的基本用法。视频
2022-06-04

使用java怎么制作一个音乐播放器功能

这期内容当中小编将会给大家带来有关使用java怎么制作一个音乐播放器功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。具体内容如下package baidu;import java.awt.*;impor
2023-05-31

Ubuntu 14.04 用户怎么安装深度音乐播放器和百度音乐插件

这篇文章主要介绍“Ubuntu 14.04 用户怎么安装深度音乐播放器和百度音乐插件”,在日常操作中,相信很多人在Ubuntu 14.04 用户怎么安装深度音乐播放器和百度音乐插件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法
2023-06-13

在Java项目中使用 swing制作一个音乐播放器

这期内容当中小编将会给大家带来有关在Java项目中使用 swing制作一个音乐播放器,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。实现代码: package com.baiting;import java
2023-05-31

怎么在c#中使用winform制作一个音乐播放器

这篇文章将为大家详细讲解有关怎么在c#中使用winform制作一个音乐播放器,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。AxWindowsMediaPlayer的方法1 首先新建一个页面
2023-06-14

使用android如何制作一个多媒体音乐播放器

使用android如何制作一个多媒体音乐播放器?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。首先,在AndroidManifest.xml中配置权限