微信音乐播放器开发

原文：http://www.cnblogs.com/imaker/p/6252638.html

一、Html5的audio组件

 

HTML5 有两个很炫的元素，就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器，制作一些效果很不错的应用。

在sae的代码管理里新建一个HTML页面，命名为test.html。

html5的页面最基本的框架如下，橙色字为文档声明，有了这个就表明这是一个html5的页面。

在<body></body>中添加一个音频元素：

<audio src="http://www.eduhope.cn/yx2011/audio_hi.mp3" controls="controls" autoplay="autoplay"></audio>

在谷歌Chrome浏览器中访问这个url，效果如下：

controls指的是用户控制界面,所以我们可以在Web页面中看到上面这个操作面板，包括播放和暂停，播放进度条，音量进度条，和进度时间显示等。autoplay 指的是自动播发已加载的媒体文件，所以我们一打开页面就可以直接播放了

无论是视屏还是音频，都是一个容器文件，包含了一些音频轨道，视频轨道和一些元数据，这些是和你的视频或者音频控件绑定到一块的，这样才形成了一个完整的播放组件。

不过由于html5的标准还不统一，还有部分安卓系统内置浏览器是阉割了这些组件的，所以使用安卓手机的朋友如果在微信内置浏览器里无法欣赏音乐的，可以点击右上角分享按钮选择复制连接，然后到QQ浏览器里打开。

二、设计个性的音乐播放器

使用浏览器默认的播放器肯定不够高端大气上档次，因此我们要自己设计一款音乐播放器，美工这块我就不写了，自己发挥吧……重点说下静态页面的结构。

在sae里打开audio.html文件，头部比前面的H5基本结构多了很多代码，不要慌我给大家解释下。

第4行是定义该网页的类型和编码，决定浏览器将以什么形式、什么编码读取这个文件，这里是告诉浏览器这是一个html文件，用的UTF8编码。

第5行是这个页面的标题，会显示在浏览器的头部。

第6行是文档作者，就是我了。

第7行是控制屏幕大小的，width 页面宽度，nitial-scale - 初始的缩放比例，minimum-scale - 允许用户缩放到的最小比例，user-scalable - 用户是否可以手动缩放。这段代码用来限制播放器的显示大小与手机屏幕一致，不能缩放。

第9行是载入样式文件

第10、11、12行载入JS插件，其中common.js里是播放器控制JS代码，具体内容会放到最后一期讲。

进入页面主题首先是播放器结构，如下图：

第16行是整个播放器的容器，规定了这个播放器的大小和位置，以及播放器的背景，这里提下如何把播放器绝对居中，CSS代码如下：

position:absolute;padding:5px;top:50%; margin-top:-155px; left:50%;width:300px;height:300px; margin-left:-155px;

此容器为相对于网页绝对定位，宽高为300px，内边距5px，整体大小为310*310px，距离页面的顶部和左边都为50%距离，然后通过外边距负155px让容器向顶部和左边移动一半的容器大小，这样就绝对居中了。

第17行唱片封面，叠加了一个背景图片。这里可能有人说为什么不直接用播放器容器背景图做唱片封面，这里主要是唱片封面是经常要切换的，网速不给力的话会出现一块空白不好看。

第18、19行喜欢按钮、列表按钮，也是使用了绝对定位，当然这个定位是相对于播放器容器的。

第20行播放控制区块，这里有个黑色渐变背景图案叠加在唱片封面图片，以突出显示歌曲标题、名字等信息。

第21、22行歌曲标题和歌手名字

第23到28行播放进度条区域，这里有两个div，pgbuf是歌曲缓存载入进度，pgtime是歌曲播放进度。

第29到30行前进、播放和后退播放按钮，播放按钮可以通过playbtn、pausebtn两个样式切换变为暂停按钮。

第37行歌曲的说明。

第38行Audio播放组件，这里给组件命名为song_player，然后就可以通过JS来控制这个播放组件，进行播放暂停操作，获取播放进度等。

第39行页面底部的版权信息

然后是歌曲列表部分，如下图：

第40行歌曲列表容器，自适应宽度，默认隐藏。

第41行歌曲列表栏头部分

第43-45行列表内容类型切换以及列表关闭按钮

第48到57行歌曲列表内容

第58到65行列表翻页控制区

最后的展现效果如下：

前端静态页面基本就是这些，下一章讲管理后台、与前端页面数据交换接口的开发。

转载于:https://www.cnblogs.com/imaker/p/6252638.html

微信公众号教程（18）微信音乐播放器开发 上相关推荐

  1. 微信公众号文章中的音乐怎么设置自动播放

    1.搜微信公众号登录,点网"微信公众号官网". 微信公众号文章中的音乐怎么设置自动播放? 2.点新建群发. 微信公众号文章中的音乐怎么设置自动播放? 3.进入新建群发,在正文里输入 ...

  2. 微信公众号如何实现视频列表播放视频的功能

    原创文章,2020-1-7,载转请说明来自CSDN 微信公众号如何实现视频列表播放视频的功能 使用场景要求: 在微信公众号中,添加多个视频,且可实现视频列表的连播功能. 要求观看视频时无广告.稳定流畅 ...

  3. 微信公众号教程-注册发布文章

    用博文来说,不便理解,直接上教学视频! 视频地址:微信公众号教程-注册发布文章

  4. 【TUN模式】对QQ或者微信域名、QQ邮箱、微信公众号文章、微信开发者社区相关的网站访问非常慢、图片加载不出来、网页空白的解决方案

    一.问题背景 最近在电脑上登录微信时,或者浏览微信公众号的文章时,经常出现卡顿得出不来图片的情况,即使出来了也是排版异常. 二.研究现状(哈哈哈哈科研人的写作习惯?) 目前网上有些大咖对这个问题给出的 ...

  5. 微信公众号网页调用微信扫一扫功能

    目录 前言: 准备条件: 用到的微信接口 代码: 效果: 总结: 前言: 最近其他项目组需要在微信公众号里面调用微信的扫一扫功能,于是就帮忙一起搞了搞,一开始以为挺简单,从网上搜一下教程弄一下就可以了 ...

  6. 微信公众号数据2019_如何制作微信公众号图文素材 微信公众号采集器好用吗

    现在有很多人都会通过微信公众号来发布文章.图片,这时候就需要使用一些编辑技巧了.下面拓途数据就和大家一同来看看如何制作微信公众号图文素材,微信公众号采集器好用吗? 微信公众号图文素材 如何制作微信公众 ...

  7. 微信公众号数据2019_微信公众号榜单排名，2020微信公众号排名

    微信公众号榜单排名,2020微信公众号排名 公众号排名优化的注意事项及细节今天给大家分享一下,作为微信公众号的排名优化对于大多数人来说都已经知道了有这个渠道的事情,其实很多的新产品及渠道出来以后有不少 ...

  8. 微信公众号数据2019_历史微信公众号排名，微信公众号新榜排名

    历史微信公众号排名,微信公众号新榜排名 公众号排名优化的注意事项及细节今天给大家分享一下,作为微信公众号的排名优化对于大多数人来说都已经知道了有这个渠道的事情,其实很多的新产品及渠道出来以后有不少的人 ...

  9. java中微信公众号框架_java微信公众号开发框架包含哪些内容呢？为什么要使用框架...

    java微信公众号开发框架包含哪些内容呢?为什么要使用框架 微信公众号是现在人们生活中经常会用到的,微信公众号有着各种各样的信息,包含了齐全的内容以及完善的功能,这也让人们可以更加轻松的在公众号上找到 ...

最新文章

  1. 使用GoAccess分析Nginx日志
  2. 中国式巨婴，到底有多可怕？
  3. oracle中to_char的用法
  4. python怎么画心形图案_Python数学方程式画心型图案源码示例
  5. Centos7 ubuntu 安装Telnet服务
  6. reactive streams的Mono及Flux
  7. 在Python中从头开始迭代本地搜索
  8. 调试Javascript代码（浏览器F12）
  9. 破解版超级数据恢复软件-内含已破解注册码
  10. Unity发布Android时需要的Android SDK/NDK的下载
  11. 对Proteus与Keil联调过程中遇到的怪异现象解决方法
  12. 移动宽带服务器维护,移动宽带 设置服务器
  13. 2016 0CTF rsa
  14. 关于获取电信光猫超级密码
  15. oracle 赋予dorp,ORACLE高级操作
  16. 什么TO B类销售 TO B这个行业的销售好做吗
  17. python考研成绩查询_2020-09-08考研成绩预测模型
  18. 微信小程序基础而重要语法整理总结（数据绑定、运算表达式、循环渲染、条件渲染、事件绑定（传参））
  19. 《农业机械学报》论文的格式要求
  20. Zynq入门——PS和PL接口技术详解

热门文章

  1. 2800首无损格式经典歌曲分享
  2. 西门子S7-1200介绍和编程及博图软件的安装使用
  3. JavaScript 25 岁了！
  4. 零基础入门python web 自动化测试_python web自动化测试，入门篇
  5. 常用的画流程图工具和脑图工具
  6. 咸鱼笔记—Socket 通信
  7. instancetype 与 id for Objective-C
  8. Nginx服务器读取不到文件的转换方法
  9. 简单图片自动手动播放html,js手动播放图片实现图片轮播效果
  10. 【解锁技能】学会Python条件语句的终极指南！