微信小程序音频播放之音乐播放器

虽然界面很简单,但是一个音频播放器该有的功能大部分都有了(没有歌词显示功能)

主要实现的功能有:

1实现音频播放,暂停;

2实现拖拽进度条,快进音频进度;

3实现上一首,下一首,列表循环播放;

4实现关闭小程序,也可在后台播放,正式版需要通过审核,开发版本可正常测试;

一丶indexjs

数据初始化

playMusic 切换播放歌曲的方法

countTimeDown 循环计时,进度展示

sliderChange slider的拖拽事件

lastMusic 上一首

playOrpause 中间的按钮,播放/暂停切换

nextMusic 下一首

listClick 列表点击事件

界面切换,时长格式化

二丶indexwxml

三丶indexwxss

四丶要实现关闭小程序后,依然后台播放,微信顶部悬浮展示,需要再appjson配置requiredBackgroundModes属性

;     让手机变成震动器的方法：

      1、在手机上，打开微信进入，点击搜索键。

      2、进入微信后，在“发现”界面点击“小程序”进入。

      3、进入“小程序”的界面，输入“震动吧”开始搜索，在搜索的结果中选择“震动吧”进入。

      4、进入“震动吧”小程序，点击“开始震动”后，可以让手机一直震动，在黑屏状态下，也可以一直震动。

      手机、全称为移动电话或无线电话，通常称为手机，原本只是一种通讯工具，早期又有大哥大的俗称，是可以在较广范围内使用的便携式电话终端，最早是由美国贝尔实验室在1940年制造的战地移动电话机发展而来。1958年，苏联工程师列昂尼德。库普里扬诺维奇发明了ЛК-1型移动电话，1973年，美国摩托罗拉工程师马丁库帕发明了世界上第一部商业化手机。历经2G时代、3G时代，迄今为止已发展至4G时代了，而5G时代也紧随其后，国内已经出现5G的商用。

      手机分为智能手机(Smartphone)和非智能手机(Featurephone)，一般智能手机的性能比非智能手机要好，但是非智能手机比智能手机性能稳定，大多数非智能手机和智能手机使用英国ARM公司架构的CPU。智能手机的主频较高，运行速度快，处理程序任务更快速，日常更加的方便(例如：诺基亚n81主频有369兆赫兹);而非智能手机的主频则比较低，运行速度也比较慢(例如：诺基亚5000主频就是50兆赫兹)。

格式调整

界面相关

分割线

标签

一、视图容器(View Container)：

view 视图容器

scroll-view 可滚动视图容器

swiper 可滑动的视图容器

二、基础内容(Basic Content)

icon 图标

text 文字

progress 进度条

三、表单组件(Form)

button 按钮

form 表单

input 输入框

checkbox 多项选择器

radio 单项选择器

picker 列表选择器

slider 滑动选择器

switch 开关选择器

label 标签

四、 *** 作反馈组件(Interaction)

action-sheet 上拉菜单

modal 模态d窗

progress 进度条

toast 短通知

五、导航(Navigation)

navigator 应用内跳转

六、多媒体(Media)

audio 音频

image

video 视频

七、地图(Map)

map 地图

八、画布(Canvas)

canvas 画布

番茄钟，是根据一个 瑞典人 所写的番茄工作法理论进行开发的一款方便、实用的日程管理软件。指的是把工作任务分解成半小时左右，集中精力工作25分钟后休息5分钟，如此视作种一个“番茄”，而“番茄工作法”的流程能使下一个30分钟更有动力。

a)开始界面的中央处有倒计时钟，分布在其下的为“工作”与“休息”的两个button，点下任一个button即可触发响应的倒计时进行计时工作。

b)在buttons下发有一个自动聚焦的input，在此处输入想要专注的任务，然后点击上方的button即可进行专注工作

c)最下方为tabBar，第一个对应的即为开始界面，第二个位记录界面，第三个为设置界面。选中图标会跳转到相应的界面同时图标会变成蓝色。

会显示“时间段+任务名“，时刻提醒自己做了些什么，底部正中央有个“清除记录”的选项，点击后会清空所有记录。

a)工作时长和休息时长可调，最上方有连个slider，华东即可进行调节

b)两个switch:一个控制倒计时的时候可以播放音乐，另外一个保证倒计时的时候屏幕不会熄灭。

a)统计界面，讲一天记录的时间按类别进行区分，并利用图表的形式进行表示

b)处理交互效果，增加触发事件的动画特性

c)美化界面，这个界面太简洁了，后续可能会增加自定义背景的功能，还会对当前的UI界面记性重构

d)音乐播放功能，会多增加几首音乐并实现可选项

发布了体验版本，邀请了即为好友进行了测试，发现线上版本出了很多bug。由于自己当时进行小程序开发的时候选择的样机为iPhone6，只对的大小进行了适配性设置，但是经朋友的安卓手机测试会出现以下bug:

界面标题没有居中、音乐无法播放(音乐播放我利用的是请求百度音乐，在以往程序都成功了，但是不知道这次为什么不行，是音乐的地址问题还是请求参数的问题还有待测试)、休息时长有时候不能正确显示(emm，我觉得这个逻辑是对的，难不成是小程序的一个bug)、开始界面的图标文字位置有些错乱(这个的确是个问题，我没又想到屏幕的大小的问题，不能仅仅指定图标和文字的大小，因为当前手机型号较多，如果利用margin-left来设置位置的话，肯定会有位置上的错误)

地址

小程序项目中涉及到视频功能，需求就是禁止拖动进度条。但是小程序video并没有提供一个属性用来禁止进度条拖动

以上是从微信官方论坛中找到的答案，就是说如果想实现禁止拖动进度条，要么就是隐藏掉，要么就是自己自定义一个进度条。如果用show-progress=‘{{false}}’，这个属性隐藏掉了进度条，那video原本自带的底部控制栏中（播放/暂停 ，进度时间，进度条，总时长，全屏/退出全屏），这些按钮中，就只剩下全屏/退出全屏了。

开始，我决定自定义进度条，但是我发现video里嵌套的组件，虽说官网给出的是可以使用view，但是只有界面效果，却触发不了view对应的方法，也就是说，我用slider组件自定义了一个进度条，并且禁用，然而不管用。

于是乎，几经波折，来回调试，最终还是决定用video自带的控制栏，通过在进度条位置，设置一个遮罩层，再设置一下透明度，这样，光标点不到进度条，就拖动不了了。当然，这个遮罩层也是要用<cover-view>

在设置遮罩层时，还遇到了问题，就是position: relative; opacity:0;无效！！！

改成这样：：position: absolute;opacity:0;模拟器，安卓手机上都没问题，iOS真机上无效！！！

但是我发现，将透明度改大一点，大于0，iOS上就可以了。

所以，我用

wxgetSystemInfo,来判断设备，如果是iOS，那就设置透明度为01，如果是安卓，就为0

其实到这里，问题基本解决了，但是还有一点点瑕疵，就是因为保留了本身的控制栏，那全屏/退出全屏的按钮功能要保留，所以遮罩层不能罩到要用的按钮，不然就都点击不了，所以在使用的按钮上我用view，设置了一个跟遮罩层一样颜色一样透明度的还补全，这样从视觉效果上才算是过关。

学小程序时写过一个B站demo，也遇到此问题，最后自定义Swiper的Dot来实现了。

思路是：用view组件重写dot，给swiper组件绑定bindchange事件用来获取当前第几个dot，动态改变class。

<!-- 滚动广告 begin -->

<view class="slider-wrapper">

<swiper bindchange="swiperChange" indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{imgUrls}}" wx:key="this">

<swiper-item>

<image src="{{item}}" class="slide-image"/>

</swiper-item>

</block>

</swiper>

<view class="swipe-btn-wrapper">

<view class="swipe-btn-list">

<view class="{{dotsClass[0]}}"></view>

<view class="{{dotsClass[1]}}"></view>

<view class="{{dotsClass[2]}}"></vi

以上就是关于微信小程序音频播放之音乐播放器全部的内容，包括:微信小程序音频播放之音乐播放器、如何让手机变成震动器、微信小程序开发-快捷键、标签等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！