小程序音乐播放器（color-music）

最新推荐文章于 2024-05-22 15:35:29 发布
最新推荐文章于 2024-05-22 15:35:29 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： 小程序 文章标签： 小程序 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40270579/article/details/106454416
版权
Color-Music是一个使用MetingJS、ColorUI的小程序音乐播放器，模仿QQ音乐移动端界面。它支持歌曲播放、暂停、切换、歌词滚动等功能，并通过缓存减轻服务器压力。该项目适合学习，不适用于商业使用。
摘要由CSDN通过智能技术生成

color-music

介绍

基于MetingJS 的小程序音乐播放器，前端使用 ColorUI ，界面参考 QQ 音乐网页版移动端，后端基于 MetingJS 的接口，同时采用缓存减少对服务器的压力。此项目仅供学习使用，请勿用作商业用途。

项目地址：

功能
  • 歌曲播放
  • 歌曲暂停
  • 上/下一曲
最低0.47元/天 解锁文章
不才_123
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用微信小程序开发制作一个简单的音乐播放应用
wx_linying1029的博客
07-26 304
通过这个案例，你可以学习到如何使用微信小程序开发工具创建一个小程序项目，如何设计前端页面，并与后端服务器进行数据交互。注意，此案例只是一个示例，实际的开发过程可能会涉及更多的功能和步骤。以下是一个简单的音乐播放器微信小程序的开发案例，包括前端页面设计和后端数据获取与处理。在服务器端创建另一个路由，监听客户端的请求，根据音乐ID返回对应的音乐信息数据。在后端服务器上搭建一个API，用于提供音乐列表和音乐信息的数据。在服务器端创建一个路由，监听客户端的请求，返回音乐列表数据。的文件夹，然后在该文件夹下新建。
使用小程序制作一个音乐播放器
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
11-11 4112
此文主要通过小程序制作一个音乐播放器，实现轮播、搜索、播放、快进、暂停、上一曲、下一曲等功能。
一款基于微信小程序的音乐播放器
08-10
一款基于微信小程序的音乐播放器
小程序音乐播放
甘乐2333的博客
04-08 2620
一.设置点击事件onMusicTap控制音乐播放 微信提供音乐播放控制器，只针对总控开关起作用，即在真机模式下，状态栏下的音乐播放控制器。 wx.pauseBackgroundAudio(); wx.playBackgroundAudio(); 二（程序有6个页面，不同页面对应不同音乐） 1.解决问题： 2.通过程序图片点击控制音乐播放。 ...
微信小程序音乐播放器
03-11
微信小程序版音乐播放器（MP3播放器），支持在线音乐 选歌 切歌等
微信小程序——音乐播放器
weixin_44037272的博客
04-03 5681
微信小程序音乐播放器 使用swiper组件完成三个标签页的切换，并且实现轮播图。scroll-view组件完成滚动视图，使用微信小程序提供的音乐API播放音频。
小程序云音乐播放功能
qq_44505797的博客
02-15 513
开发工具与关键技术： 作者：肖广斌 撰写时间：2021年2月15日 在一个音乐播放器中，最基本的功能就是播放/暂停，上一首/下一首了，那么在这里，播放/暂停该如何实现呢，其实也很简单，让我们来看一下。 首先是我们的静态页面，接着我们需要点击播放/暂停键，让它实现播放效果。 1、我们需要创建一个控制音乐播放的实例，获取到歌曲的详情，如下图 2、我们需要创建一个控制音乐播放/暂停的功能函数，就是我们需要在这里通过音乐id获取该音乐的播放链接，然后通过小程序自带的backAudioManager来实现效果
微信小程序 初学——【音乐播放器】
qq_56238454的博客
12-12 1万+
本人在学习微信小程序【音乐播放器】时的简单介绍
微信小程序——【云音乐播放器】
weixin_54425212的博客
12-13 2870
云音乐播放器
使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)
热门推荐
努力是为了站在万人之中，成为别人的光
09-13 4万+
直接跳到末尾 获取完整源码 今天我将带着大家使用 HTML、CSS 和 JS创建 音乐播放器，没有使用任何其他库。我们的音乐播放器具有三个部分。主屏幕、播放器部分和播放列表部分。我们的主页部分有一个平滑的工作滑块，也有水平滚动。这个音乐播放器最好的部分是它最小化了音乐播放器。是的，您可以最小化和最大化播放器本身。使这个项目成为一个很棒的音乐播放器。 ❤️使用 HTML、CSS 和 JS 创建在线音乐播放器❤️???? 在线演示地址???? 完整代码结构???? home-section 首页部分???
微信小程序音乐播放自定义组件
06-17
微信小程序音乐播放以及slider滑块控制自定义组件。解压缩放入项目即可使用，可以播放任意数量音频。拥有可拖动的滑块控制组件。时间显示。音频图片播放中动画。完善的播放暂停选择时间等等功能。
微信小程序音乐播放器demo
01-12
该小程序源码是一个音乐播放器，适用于刚刚学习微信小程序的人员。
微信小程序实现音乐的播放跟控制
06-19
微信小程序利用接口，实现手机音乐播放器的源码与实例。
2018年最新的微信小程序-音乐播放器源码
01-27
2018年最新的微信小程序-音乐播放器源码，欢迎下载，参考下。
音乐播放器小程序源码
09-06
音乐播放器小程序源码，需要的下载即可，不喜勿喷，谢谢支持
【微信小程序——云音乐播放器】
LZB_XM的博客
12-12 1062
swiper常用属性：可选值说明默认Boolean是否显示面板指示点，默认为falseColor指示点颜色，默认为rgba(0,0,0,.3)Color当前选中的指示点颜色，默认为#000000autoplayBoolean是否自动切换，默认为falsecurrentNumber当前所在滑块的index，默认为0String当前所在滑块的item-id（不能同时指定current）intervalNumber自动切换时间间隔（毫秒），默认为5000。
微信小程序播放背景音乐
aaa123aaasqw的博客
05-12 1831
从微信客户端6.7.2版本开始，若需要在小程序切后台后继续播放音频，需要在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效，正式版还需通过审核。获取全局唯一的背景音频管理器。小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。2、onUnload和onHide事件中暂停音乐的播放。4、在播放结束的事件中，再次播放，以达到循环播放的效果。3、onShow中调用播放事件。
微信小程序音频播放
最新发布
xingchen_xc的博客
05-22 2464
微信小程序播放音频有2种方式，一个是正常播放音频，一个是背景音频，这两个虽然都可以让音频进行播放，api也有很多相同的地方，但是还是有区别的，背景音频播放可以在锁屏的情况下，及小程序所有页面播放，正常的音频只能在当前页面播放。
写一个本地音乐播放器的微信小程序
05-22
很好的问题！下面是一个简单的本地音乐播放器微信小程序的示例代码。 1. 首先，在微信小程序的开发工具中，创建一个新的小程序项目。然后，在 `app.json` 文件中添加以下代码段： ```json { "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "音乐播放器" } } ``` 这里我们定义了音乐播放器的主页为 `pages/index/index`，并设置了导航栏标题为 "音乐播放器"。 2. 然后，在 `pages/index/` 目录下，创建一个 `index.wxml` 文件，添加以下代码： ```html <view class="container"> <view class="music-info"> <image class="cover" src="{{currentMusic.cover}}"></image> <view class="title">{{currentMusic.title}}</view> <view class="artist">{{currentMusic.artist}}</view> </view> <view class="music-control"> <button class="btn prev" bindtap="prevMusic">上一曲</button> <button class="btn play" bindtap="playMusic">{{isPlaying ? '暂停' : '播放'}}</button> <button class="btn next" bindtap="nextMusic">下一曲</button> </view> </view> ``` 这里我们定义了音乐播放器的界面布局，包括音乐封面、音乐标题、音乐艺术家和控制按钮。 3. 接着，在 `pages/index/` 目录下，创建一个 `index.js` 文件，添加以下代码： ```javascript Page({ data: { musics: [ { title: '海阔天空', artist: 'Beyond', cover: 'https://cdn.pixabay.com/photo/2016/08/02/16/48/microphone-1560638_960_720.jpg', src: 'http://music.163.com/song/media/outer/url?id=574566207.mp3' }, { title: '稻香', artist: '周杰伦', cover: 'https://cdn.pixabay.com/photo/2016/01/19/16/51/microphone-1145915_960_720.jpg', src: 'http://music.163.com/song/media/outer/url?id=227923.mp3' } ], currentMusicIndex: 0, currentMusic: null, isPlaying: false }, onLoad: function () { this.setData({ currentMusic: this.data.musics[this.data.currentMusicIndex] }) }, prevMusic: function () { if (this.data.currentMusicIndex > 0) { this.setData({ currentMusicIndex: this.data.currentMusicIndex - 1, currentMusic: this.data.musics[this.data.currentMusicIndex], isPlaying: true }) } }, nextMusic: function () { if (this.data.currentMusicIndex < this.data.musics.length - 1) { this.setData({ currentMusicIndex: this.data.currentMusicIndex + 1, currentMusic: this.data.musics[this.data.currentMusicIndex], isPlaying: true }) } }, playMusic: function () { this.setData({ isPlaying: !this.data.isPlaying }) } }) ``` 这里我们定义了音乐播放器的逻辑，包括音乐列表、当前播放的音乐、是否正在播放等。 4. 最后，在 `app.wxss` 文件中添加以下样式： ```css .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .music-info { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 20px; } .cover { width: 200px; height: 200px; border-radius: 50%; background-size: cover; background-position: center; } .title { font-size: 24px; font-weight: bold; margin-top: 20px; } .artist { font-size: 16px; color: #999; margin-top: 10px; } .music-control { display: flex; align-items: center; justify-content: center; } .btn { padding: 10px 20px; margin: 0 10px; background-color: #333; color: #fff; border-radius: 4px; border: none; outline: none; cursor: pointer; } .play { background-color: #0f0; } ``` 这里我们定义了音乐播放器的样式，包括音乐封面、音乐标题、音乐艺术家和控制按钮等。 完成以上步骤后，在微信开发工具中预览该小程序，即可看到一个简单的本地音乐播放器。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值