HTML5之audio实战，网页音乐播放器开发

今天我们就基于 HTML5 audio 来，开发一个网页音乐播放器。

在HTML5 新特性中，audio 、video 是我们比较关心的新元素，我们终于可以脱离 Flash ，来开发音频、视频播放器了，对于一个HTML 新元素，无非就是属性、事件、方法等等，关于audio 的具体的属性、事件、方法，请谷歌。

看我们的HTML代码： audio.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Audio</title><link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css"/></head><body><div class="container"><div class="row"><div class="col-md-4"><ol id="m-list"></ol></div><div class="col-md-4"><div>正在播放: <strong id="rmusic"></strong></div><audio id="audio" controls></audio><div class="btn-group" id="ctrl-area"><button id="btn-play" class="btn btn-success">播放</button><button id="btn-pre" class="btn btn-success">上一首</button><button id="btn-next" class="btn btn-success">下一首</button><button id="btn-pause" class="btn btn-success">暂停</button><!-- Single button --><div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">播放模式 <span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#" id="btn-loop">单曲循环</a></li><li><a href="#" id="btn-order">顺序播放</a></li><li><a href="#" id="btn-random">随机播放</a></li></ul></div></div></div></div></div><script src="bower_components/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script><script src="bower_components/bootstrap/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script><script src="js/audio.js" type="text/javascript" charset="utf-8"></script></body>
</html>

Javascript 代码：audio.js

$(function() {// 播放器var Player = {// 歌曲路径path : 'res/music/',// 歌曲数据data : null,// 当前播放歌曲的 索引currentIndex : -1,//  播放器元素jquery对象$audio : $('audio'),// 歌曲列表$mList : $('#m-list'),//正在播放的歌曲$rmusic : $('#rmusic'),// 初始化 数据init : function() {// 数据一般来自服务器端,通过ajax 加载数据,这里是模拟Player.data = ['五月天 - Ing - 劲舞团 恋爱.mp3', '李宇春 - 下个路口见.mp3', '小可 - 嗨曲.mp3'];// 一般用模板引擎,把数据 与 模板 转换为 视图,来显示,这里是模拟var mhtml = '';var len = Player.data.length;for (var i = 0; i < len; i++) {mhtml += '<li><a index="' + i + '">' + Player.data[i] + '</a></li>';}Player.$mList.html(mhtml);},// 就绪ready : function() {// 控制Player.audio = Player.$audio.get(0);$('#ctrl-area').on('click', 'button', function() {Player.$rmusic.html(Player.data[Player.currentIndex]);});// 播放$('#btn-play').click(function() {Player.audio.play();if (Player.currentIndex == -1) {$('#btn-next').click();}});// 暂停$('#btn-pause').click(function() {Player.audio.pause();});// 下一曲$('#btn-next').click(function() {if (Player.currentIndex == -1) {Player.currentIndex = 0;} else if (Player.currentIndex == (Player.data.length - 1)) {Player.currentIndex = 0;} else {Player.currentIndex++;}console.log("Player.currentIndex : " + Player.currentIndex);Player.audio.src = Player.path + Player.data[Player.currentIndex];Player.audio.play();});// 上一曲$('#btn-pre').click(function() {if (Player.currentIndex == -1) {Player.currentIndex = 0;} else if (Player.currentIndex == 0) {Player.currentIndex = (Player.data.length - 1);} else {Player.currentIndex--;}Player.audio.src = Player.path + Player.data[Player.currentIndex];Player.audio.play();});// 单曲循环$('#btn-loop').click(function() {console.log("Player.currentIndex :", Player.currentIndex);Player.audio.onended = function() {Player.audio.load();Player.audio.play();};});// 顺序播放$('#btn-order').click(function() {console.log("Player.currentIndex :", Player.currentIndex);Player.audio.onended = function() {$('#btn-next').click();};});// 随机播放$('#btn-random').click(function() {Player.audio.onended = function() {var i = parseInt((Player.data.length - 1) * Math.random());playByMe(i);};});// 播放指定歌曲function playByMe(i) {console.log("index:", i);Player.audio.src = Player.path + Player.data[i];Player.audio.play();Player.currentIndex = i;Player.$rmusic.html(Player.data[Player.currentIndex]);}// 歌曲被点击$('#m-list a').click(function() {playByMe($(this).attr('index'));});}};Player.init();Player.ready();});

效果：

实现了播放器常用的功能，当然可以基于CSS3 开发更炫酷的界面效果，

这里主要关注，代码的实现。

HTML5之audio实战，网页音乐播放器开发相关推荐

网页音乐播放器开发实战
网页音乐播放器布局****功能 ** 功能代码块 ** ** 1.音乐播放器侧边栏的缩放以及展开 ** ** 2.图片旋转以及对应的图片文字更改功能,实现音乐播放 ** ** 实现播放按钮切换歌曲 ...
使用HTML5实现网页音乐播放器
转自http://www.php.cn/html5-tutorial-402849.html 本篇文章主要介绍了HTML5网页音乐播放器的示例代码,内容挺不错的,现在分享给大家,也给大家做个参考. 本 ...
php项目网页音乐播放器插件,10个免费开源的JS音乐播放器插件
10个免费开源的JS音乐播放器插件三月 24, 2015 评论 (3) Sponsor 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些网页播放器插件比较少见,所以这里 ...
10款Flash和Javascript网页音乐播放器
关联:9 Fresh jQuery Media Players 10款音乐播放器, 有基于javascript的网页音乐播放器,也有基于Flash的音乐播放器.赶快挑一款,分享你喜爱的音乐吧! 1. ...
基于Vue实现的网页音乐播放器
基于Vue现实网页音乐播放器该音乐播放器是由父组件和子组件相结合通过axios获取音乐的相关属性,将其显示在界面,通过点击实现相应的操作.链接为https://download.csdn.net/d ...
用JavaScript实现简易的网页音乐播放器
用JavaScript实现简易的网页音乐播放器最近疫情在家,利用这段时间开始自学HTML等内容,目前在写自己的个人主页,想用音乐来给自己的主页增添点特色. 一开始单纯用audio标签添加音乐,带上a ...
HTML：给自己设计一个简单的专属网页音乐播放器
Hello,大家好,我是wangzirui32,今天我们来学习如何给自己设计一个简单的网页音乐播放器. 开始学习吧! 学习目录 1. 项目架构 2. player.html 编写 3. style.c ...
HTML5+JS实现简易的音乐播放器
HTML5+JS实现简易的音乐播放器播放器实现的功能播放/暂停音乐切换歌曲,上/下一首歌音量最大或静音音乐播放时间实时变化进度条拖拽歌曲图片切换播放器效果展示代码展示 html &l ...
【html+css练习】小白使用html+css模拟音乐播放器构造了网页音乐播放器--1
文章目录纯html+css构造网页音乐播放器 html代码: CSS代码: 纯html+css构造网页音乐播放器此处参照各大音乐播放器这个页面使用了1天的时间进行构造,由于对各语法还不是很熟悉, ...

HTML5之audio实战，网页音乐播放器开发

HTML5之audio实战，网页音乐播放器开发相关推荐

最新文章

热门文章