今天闲暇时间，花了2小时，写了个简单音乐播放器。欢迎大家来吐糟

先看下界面截图

大体实现：播放，停止，上一曲，下一曲，循环播放功能。

知识点：1.html 中audio 2.css 位置fixed

其中audio用到的方法：1.play 2.pause ,属性：1.src 2.loop

对于audio不熟悉的移步到http://www.w3school.com.cn/jsref/dom_obj_audio.asp

其中数据部分是在网上找了的保存在listrings.js中

下边关键时刻代码来了

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>audio测试</title>

         <meta name="viewport" content="width=device-width" />

         <style>

             * {

                 margin: 0;

                 padding: 0;

             }

             body {

                 margin-bottom: 50px;

             }

             .fix {

                 position: fixed;

                 bottom: 0;

                 left: 0;

                 z-index: 99;

                 background-color: rgba(0, 0, 0, .5);

                 right: 0;

                 text-align: center;

                 font-size:0;

             }

             audio {

                 display: block;

                 width: 100%;

             }

             button{

                 padding: 3px 2px;

                 margin:4px 1px;

             }

             .mp3_list {

                 padding: 0;

                 list-style: none;

             }

             .mp3_list .mp3_title {

                 padding: 14px 5px;

                 border-bottom: 1px solid #CCCCCC;

                 color: #FFFFFF;

                 background: #1EACEA;

                 text-align: center;

             }

             .mp3_list li {

                 position: relative;

                 padding: 15px 50px 12px 12px;

                 background: #fff;

                 color: #4C4C4C;

                 overflow: hidden;

                 font-size: 14px;

                 text-overflow: ellipsis;

                 border-bottom: 1px solid #F5F5F5;

                 white-space: nowrap;

                 cursor: pointer;

             }

             .mp3_list .over,

             .mp3_list .active {

                 color: #00B7EE;

             }

             .mp3_list li span {

                 position: absolute;

                 font-size: 12px;

                 right: 0;

             }

         </style>

     </head>

     <body>

         <div class="fix">

             <audio controls autoplay="autoplay">

                 <source src="http://www.runoob.com/try/demo_source/horse.ogg"></source>

                 浏览器不支持播放器请更换谷歌或升级浏览器

             </audio>

             <button id="play">播放</button>

             <button id="paused">暂停</button>

             <button id="urls">音乐地址</button>

             <button id="preurl">上一曲</button>

             <button id="nexturl">下一曲</button>

             <button id="loop">循环</button>

         </div>

         <ul class="mp3_list">

         </ul>

         <script src="listrings.js"></script>

         <script type="text/javascript" src="jquery-2.1.0.js"></script>

         <script>

             $(function() {

                 var listindex = 0,

                     len = mp3s.length,

                     audio = $("audio")[0],

                     source=$("source")[0];

                 var initlist = function() {

                     var html = '<div class="mp3_title">音乐列表</div>'

                     for(i = 0; i < len; i++) {

                         html += '<li data-id="' + i + '">' + mp3s[i].title + '<span>' + mp3s[i].desp.split("|")[1] + '</span></li>'

                     }

                     $(".mp3_list").html(html)

                 };

                 var playaudio = function() {

                     audio.play();

                 };

                 //改变音频地址

                 var changeSrc = function(index) {

                     $(".mp3_list li").removeClass("active")

                     $(".mp3_list li").removeClass("over");

                     audio.src=mp3s[index].songUrl;

                     $("#paused").trigger("click")

                     $(".mp3_list li").eq(index).addClass("active")

                     playaudio()

                 };

                 //初始化音乐队列

                 initlist();

                 //默认播放第一首

                 changeSrc(listindex);

                 //监听结束事件

                 $("audio").on("ended", function() {

                     if(++listindex > len) {

                         listindex = 0;

                     }

                     changeSrc(listindex);

                 });

                 $(".mp3_list").on("mouseover", "li", function() {

                     $(this).addClass("over")

                 });

                 $(".mp3_list").on("mouseout", "li", function() {

                     $(this).removeClass("over")

                 });

                 $(".mp3_list").on("click", "li", function() {

                     listindex = $(this).attr("data-id");

                     changeSrc(listindex)

                 });

                 //播放

                 $("#play").click(playaudio);

                 $("#paused").click(function() {

                     audio.pause()

                 });

                 $("#loop").click(function() {

                     var val=audio.loop==true?"循环":"关闭"

                     $(this)[0].innerText=val

                     audio.loop = !audio.loop;

                 });

                 //当前音乐地址

                 $("#urls").click(function() {

                     alert(audio.currentSrc)

                 });

                 //上一曲

                 $("#preurl").click(function() {

                     if(--listindex < 0) {

                         listindex = 0;

                         return

                     } else {

                         changeSrc(listindex)

                     }

                 });

                 //下一曲

                 $("#nexturl").click(function() {

                     if(++listindex > len) {

                         listindex = len;

                         return

                     } else {

                         changeSrc(listindex)

                     }

                 });

             })

         </script>

     </body>

 </html>

效果狠狠点击 https://huashuaipeng.github.io/music/audio.html

源码地址：https://github.com/huashuaipeng/music

如果发现不能播放的说明资源不存在了。

推荐一篇文章

HTML5 Audio/Video 标签,属性,方法,事件汇总 https://www.douban.com/note/158621500/

web音乐播放器的更多相关文章

  1. 基于vue的移动端web音乐播放器

    声明 以下只是学习完慕课网huangyi老师实战视频课程的笔记内容,仅供个人参考学习使用.如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话,请移步这里:https://coding.i ...

  2. web音乐播放器总结

    前言 项目暂时告一段落,胸中有股炽热之气望喷涌而出!忍不住吐槽,为什么程序员要加班啊,为什么产品下达deadline,就得把这生死剑架在程序员的脖子上.卧槽,听说程序员在国外是叫工程师的.最近看了很多 ...

  3. 网页播放音频、视频文件——基于web的html 5的音乐播放器（转载）

    文章转载自:开源中国社区 [http://www.oschina.net] 想通过手机客户端(支持 Android.iPhone 和 Windows Phone)访问开源中国:请点这里 HTML5 是 ...

  4. HTML5的Audio标签打造WEB音频播放器

    目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...

  5. Dewplayer 音乐播放器

    Dewplayer 是一款用于 Web 的轻量级 Flash 音乐播放器.提供有多种样式选择,支持播放列表,并可以通过 JavaScript 接口来控制播放器. 注意事项: 该播放器只支持 mp3 格 ...

  6. 【竞品分析】Android音乐播放器的竞品分析

    迄今为止最长的一篇博客,各位看官笑纳~~ 本次分析基于Android平台,选取了几款我体验过的播放器进行比较分析.主要分为两类,一类是大而全的,功能全面,可满足用户管理歌曲.导入导出歌单等多方面需求, ...

  7. 4个小时实现一个HTML5音乐播放器

    技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...

  8. swift3.0 简单直播和简单网络音乐播放器

    本项目采用swift3.0所写,适配iOS9.0+,所有界面均采用代码布局. 第一个tab写的是简单直播,传统MVC模式,第二个tab写的是简单网络音乐播放器.传说MVVM模式(至于血统是否纯正我就不 ...

  9. HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

随机推荐

  1. vue之全局自定义组件

    在项目开发中,往往需要使用到一些公共组件,比如,弹出消息.面包屑或者其它的组件,为了使用方便,将其以插件的形式融入到vue中,以面包屑插件为例: 1.创建公共组件MyBread.vue <tem ...

  2. clickhouse核心引擎MergeTree子引擎

    在clickhouse使用过程中,针对数据量和查询场景,MergeTree是最常用也是较为合适的表引擎.针对特定的业务,MergeTree的子引擎可以针对不同的业务而定,但都基于MergeTree引擎 ...

  3. vue 表格 多选 换页保存前一页的状态

    表格多选 点击下一页,上一页的状态没消失. 在表格 添加 row-key="id" 在表格行里添加 reserve-selection

  4. go new

    go new 尽管没有构造函数,go有一个内置的函数new,可以用来分配一个类型需要的内存.new(X)和&X{}是等效的: goku := new(Saiyan) // 等效 goku := ...

  5. 【代码工具】Orika JavaBean映射工具探秘

    转自:https://www.cnblogs.com/albert1024/articles/8434741.html Orika是一个简单.快速的JavaBean拷贝框架,Orika使用字节代码生成 ...

  6. Flex布局（一）

    Flex Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局.display: flex;, 行内元 ...

  7. Android中怎么破解游戏之修改金币数

    我们在玩游戏的时候总是会遇到一些东东需要进行购买的,但是我们可能又舍不得花钱,那么我们该怎么办呢?那就是用游戏外挂吧!我们这里说的是Android中的游戏,在网上搜索一下移动端游戏外挂,可能会找到一款 ...

  8. 超好用的thinkphp5.0/thinkphp5.1分页插件!详细使用步骤(内附代码)

    效果 tp5.0使用方法 page下载地址:进入下载页面 提取码:s75k 1,把page文件夹整个目录复制到 目录extend下 2,修改默认配置 app/config.php 把里面的 'pagi ...

  9. tp5.1 模型 where多条件查询 like 查询 --多条件查询坑啊！！(tp5.1与tp5.0初始化控制器不一样)

    tp5.1与tp5.0初始化控制器不一样!!!!!!!!!! 多条件 where必须  new where() ---------------------------------------tp5.1 ...

  10. makefile.new(7117) : error U1087: cannot have : and :: dependents for same target

    makefile.new(7117) : fatal error U1087: cannot have : and :: dependents for same target(2012-05-21 2 ...