小程序简单版音乐播放器

小程序简单版音乐播放器

在这里插入图片描述

结构

先来看看页面结构

    <!-- wxml --><!-- 标签页标题 -->
<view class="tab"><view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view><view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view><view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<!-- 内容区域 -->
<view class="content"><swiper current="{{item}}" bindchange="changeTab"><swiper-item><!-- 内容滚动区域 --><scroll-view class="content-info" scroll-y><!-- 轮播图 --><swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay><swiper-item><image src="/images/02.jpg" mode="aspectFill" /></swiper-item><swiper-item><image src="/images/03.jpg" mode="aspectFill" /></swiper-item><swiper-item><image src="/images/04.jpg" mode="aspectFill" /></swiper-item></swiper><!-- 功能按钮 --><view class="content-info-portal"><view><image src="/images/04.png" mode="aspectFill" catch:tap="fm" /><text>私人FM</text></view><view><image src="/images/05.png" mode="aspectFill" /><text>每日歌曲推荐</text></view><view><image src="/images/06.png" mode="aspectFill" /><text>云音乐新歌榜</text></view></view><!-- 热门音乐 --><view class="content-info-list"><view class="list-title">推荐歌曲</view><view class="list-inner"><view class="list-item"><image src="/images/hush.png" mode="aspectFill" /><view>Hush</view></view><view class="list-item"><image src="/images/talk.png" mode="aspectFill" /><view>Talk</view></view><view class="list-item"><image src="/images/men.png" mode="aspectFill" /><view>Memories</view></view><view class="list-item"><image src="/images/hour.png" mode="aspectFill" /><view>golden hour</view></view><view class="list-item"><image src="/images/mess.png" mode="aspectFill" /><view>Yes I'm A Mess</view></view><view class="list-item"><image src="/images/iii.png" mode="aspectFill" /><view>III Do It</view></view></view></view></scroll-view></swiper-item><swiper-item><!-- 播放器页面 --><include src="play.wxml" /></swiper-item><swiper-item><include src="playlist.wxml" /></swiper-item></swiper>
</view>
<!-- 底部播放器 -->
<view class="player"><image class="player-cover" src="{{play.coverImgUrl}}" mode="aspectFill" /><view class="player-info"><view class="player-info-title">{{play.title}}</view><view class="player-info-singer">{{play.singer}}</view></view><view class="player-controls"><!-- 切换到播放列表 --><image src="/images/01.png" bindtap="changePage" data-page="2" mode="aspectFill" /><!-- 播放或暂停 --><image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" mode="aspectFill" /><image wx:else src="/images/02stop.png" bindtap="pause" mode="aspectFill" /><!-- 下一曲 --><image src="/images/03.png" bindtap="next" mode="aspectFill" /></view>
</view>

其中一些代码可以使用 wx:for 循环创建，这边为了简单明了就没有循环创建

页面样式

page {display: flex;flex-direction: column;background: #17181a;color: #ccc;height: 100%;
}.tab {display: flex;
}.tab-item {flex: 1;font-size: 10pt;text-align: center;line-height: 72rpx;border-bottom: 6rpx solid #eee;
}.content {flex: 1;
}.content > swiper {height: 100%;
}.player {background: #222;border-top: 1px solid #252525;height: 112rpx;
}.tab-item.active {color: #c25b5b;border-bottom-color: #c25b5b;
}.content-info {height: 100%;
}::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}/* 轮播图 */.content-info-slide {height: 302rpx;margin-bottom: 20px;
}.content-info-slide image {width: 100%;height: 100%;
}/* 功能按钮 */.content-info-portal {display: flex;margin-bottom: 15px;
}.content-info-portal > view {flex: 1;font-size: 11pt;text-align: center;
}.content-info-portal image {width: 120rpx;height: 120rpx;display: block;margin: 20rpx auto;
}/* 热门音乐 */.content-info-list {font-size: 11pt;margin-bottom: 20rpx;
}.content-info-list > .list-title {margin: 20rpx 35rpx;
}.content-info-list > .list-inner {display: flex;flex-wrap: wrap;margin: 0 20rpx;
}.content-info-list > .list-inner > .list-item {flex: 1;
}.content-info-list > .list-inner > .list-item > image {display: block;width: 200rpx;height: 200rpx;margin: 0 auto;border-radius: 10rpx;border: 1rpx solid #555;
}.content-info-list > .list-inner > .list-item > view {width: 200rpx;margin: 10rpx auto;font-size: 10pt;
}/* 播放器 */.content-play {display: flex;justify-content: space-around;flex-direction: column;height: 100%;text-align: center;
}.content-play-info > view {color: #888;font-size: 11pt;
}/* 底部播放器 */.player {display: flex;align-items: center;background: #222;border-top: 1px solid #252525;height: 112rpx;
}.player-cover {width: 80rpx;height: 80rpx;margin-left: 15rpx;border-radius: 8rpx;border: 1px solid #333;
}.player-info {flex: 1;font-size: 10pt;line-height: 38rpx;margin-left: 20rpx;padding-bottom: 8rpx;
}.player-info-singer {color: #888;
}.player-controls image {width: 80rpx;height: 80rpx;margin-right: 15rpx;
}/* 显示专辑页面样式 */.content-play-cover image {animation: rotateImage 10s linear infinite;width: 400rpx;height: 400rpx;border-radius: 50%;border: 1px solid #333;
}@keyframes rotateImage {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}/* 播放进度和时间 */.content-play-progress {display: flex;align-items: center;margin: 0 35rpx;font-size: 9pt;text-align: center;
}.content-play-progress > view {flex: 1;
}/* 播放列表 */.playlist-item {display: flex;align-items: center;border-bottom: 1rpx solid #333;height: 112rpx;
}.playlist-cover {width: 80rpx;height: 80rpx;margin-left: 15rpx;border-radius: 8rpx;border: 1px solid #333;
}.playlist-info {flex: 1;font-size: 10pt;line-height: 38rpx;margin-left: 20rpx;padding-bottom: 8rpx;
}.playlist-info-singer {color: #888;
}.playlist-controls {font-size: 10pt;margin-right: 20rpx;color: #c25b5b;
}

核心代码

音乐数据

🆗，接下来创建播放列表数据

data: {item: 0,tab: 0,// 播放列表数据playlist: [{id: 1,title: 'Always Online',singer: '林俊杰',src: 'http://localhost:3000/林俊杰 - Always Online.mp3',coverImgUrl: '/images/jj.jpeg'}, {id: 2,title: '不得不爱',singer: '潘玮柏、弦子',src: 'http://localhost:3000/潘玮柏、弦子 - 不得不爱.mp3',coverImgUrl: '/images/pwb.jpg'}, {id: 3,title: '大城小爱',singer: '王力宏',src: 'http://localhost:3000/王力宏 - 大城小爱.mp3',coverImgUrl: '/images/wlh.jpeg'}, {id: 4,title: '偏爱',singer: '张芸京',src: 'http://localhost:3000/张芸京 - 偏爱.mp3',coverImgUrl: '/images/pa.jpeg'}],state: 'paused',playIndex: 0,play: {currentTime: '00:00',duration: '00:00',percent: 0,title: '',singer: '',coverImgUrl: '/images/cover.jpg',}},

切换功能

来实现一些页面之间简单的切换

 // 页面切换changeItem: function (e) {this.setData({item: e.target.dataset.item,})},// tab切换changeTab: function (e) {this.setData({tab: e.detail.current})},

播放功能

// 实现播放器播放功能audioCtx: null,onReady: function () {this.audioCtx = wx.createInnerAudioContext()// 默认选择第1曲this.setMusic(0)var that = this// 播放进度检测this.audioCtx.onError(function () {console.log('播放失败：' + that.audioCtx.src)})// 播放完成自动换下一曲this.audioCtx.onEnded(function () {that.next()})// 自动更新播放进度this.audioCtx.onPlay(function () {})this.audioCtx.onTimeUpdate(function () {that.setData({'play.duration': formatTime(that.audioCtx.duration),'play.currentTime': formatTime(that.audioCtx.currentTime),'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100})})// 格式化时间function formatTime(time) {var minute = Math.floor(time / 60) % 60;var second = Math.floor(time) % 60return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)}},// 音乐播放setMusic: function (index) {var music = this.data.playlist[index]this.audioCtx.src = music.srcthis.setData({playIndex: index,'play.title': music.title,'play.singer': music.singer,'play.coverImgUrl': music.coverImgUrl,'play.currentTime': '00:00','play.duration': '00:00','play.percent': 0})},// 播放按钮play: function () {this.audioCtx.play()this.setData({state: 'running'})},// 暂停按钮pause: function () {this.audioCtx.pause()this.setData({state: 'paused'})},// 下一曲按钮next: function () {var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1this.setMusic(index)if (this.data.state === 'running') {this.play()}},

接下来就是一些必不可少的小功能了

// 滚动条调节歌曲进度sliderChange: function (e) {var second = e.detail.value * this.audioCtx.duration / 100this.audioCtx.seek(second)},// 播放列表换曲功能change: function (e) {this.setMusic(e.currentTarget.dataset.index)this.play()}

🆗，最后的就剩下node服务了，这边node服务只是为了挂载音乐文件这些静态资源。
这边我也会将服务端上传到本篇博客，把自己需要的MP3或MP4格式文件放入到htdocs中即可。
这边怕引起版权纠纷和维权问题就不把歌曲文件放入其中
在这里插入图片描述

node 下面代码存放在 index.js 中 请记得使用 yarn 或者 npm 安装以下的引入文件

var express = require('express')
var serveIndex = require('serve-index')
var serveStatic = require('serve-static')
var multiparty = require('multiparty')
var finalhandler = require('finalhandler')
var util = require('util')var LOCAL_BIND_PORT = 3000
var app = express()app.post('/upload', function (req, res) {var form = new multiparty.Form()form.encoding = 'utf-8'form.uploadDir = './htdocs/upfile'form.maxFilesSize = 4 * 1024 * 1024form.parse(req, function (err, fields, files) {if (err) {console.log('parse error: ' + err)} else {console.log('parse files: ' + JSON.stringify(files))}res.writeHead(200, { 'content-type': 'text/plain;charset=utf-8' })res.write('received upload')res.end()})
})var serve = serveStatic('./htdocs')
app.use('/', serveIndex('./htdocs', { 'icons': true }))app.get('/*', function (req, res) {serve(req, res, finalhandler(req, res))
});// console.log(`Start static file server at ::${LOCAL_BIND_PORT}, Press ^ + C to exit`)
console.log('启动成功')app.listen(LOCAL_BIND_PORT)
// 监听3000端口
// app.listen(3000, () => {
//   console.log('server running at http://127.0.0.1:3000')
// })

最后附上完整代码

// pages/index/index.js
Page({/*** 页面的初始数据*/data: {item: 0,tab: 0,// 播放列表数据playlist: [{id: 1,title: 'Always Online',singer: '林俊杰',src: 'http://localhost:3000/林俊杰 - Always Online.mp3',coverImgUrl: '/images/jj.jpeg'}, {id: 2,title: '不得不爱',singer: '潘玮柏、弦子',src: 'http://localhost:3000/潘玮柏、弦子 - 不得不爱.mp3',coverImgUrl: '/images/pwb.jpg'}, {id: 3,title: '大城小爱',singer: '王力宏',src: 'http://localhost:3000/王力宏 - 大城小爱.mp3',coverImgUrl: '/images/wlh.jpeg'}, {id: 4,title: '偏爱',singer: '张芸京',src: 'http://localhost:3000/张芸京 - 偏爱.mp3',coverImgUrl: '/images/pa.jpeg'}],state: 'paused',playIndex: 0,play: {currentTime: '00:00',duration: '00:00',percent: 0,title: '',singer: '',coverImgUrl: '/images/cover.jpg',}},// 页面切换changeItem: function (e) {this.setData({item: e.target.dataset.item,})},// tab切换changeTab: function (e) {this.setData({tab: e.detail.current})},// 实现播放器播放功能audioCtx: null,onReady: function () {this.audioCtx = wx.createInnerAudioContext()// 默认选择第1曲this.setMusic(0)var that = this// 播放进度检测this.audioCtx.onError(function () {console.log('播放失败：' + that.audioCtx.src)})// 播放完成自动换下一曲this.audioCtx.onEnded(function () {that.next()})// 自动更新播放进度this.audioCtx.onPlay(function () {})this.audioCtx.onTimeUpdate(function () {that.setData({'play.duration': formatTime(that.audioCtx.duration),'play.currentTime': formatTime(that.audioCtx.currentTime),'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100})})// 格式化时间function formatTime(time) {var minute = Math.floor(time / 60) % 60;var second = Math.floor(time) % 60return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)}},// 音乐播放setMusic: function (index) {var music = this.data.playlist[index]this.audioCtx.src = music.srcthis.setData({playIndex: index,'play.title': music.title,'play.singer': music.singer,'play.coverImgUrl': music.coverImgUrl,'play.currentTime': '00:00','play.duration': '00:00','play.percent': 0})},// 播放按钮play: function () {this.audioCtx.play()this.setData({state: 'running'})},// 暂停按钮pause: function () {this.audioCtx.pause()this.setData({state: 'paused'})},// 下一曲按钮next: function () {var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1this.setMusic(index)if (this.data.state === 'running') {this.play()}},// 滚动条调节歌曲进度sliderChange: function (e) {var second = e.detail.value * this.audioCtx.duration / 100this.audioCtx.seek(second)},// 播放列表换曲功能change: function (e) {this.setMusic(e.currentTarget.dataset.index)this.play()}
})

在这里插入图片描述

  • 失联

最后编辑时间 2024，06，17；10：11

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/860659.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SAP ABAP 之容器

SAP ABAP 之容器

文章目录 前言一、案例介绍/笔者需求二、自定义容器 a.实例化对象 b.自定义容器效果演示 c.Copy Code 三、自适应容器 a.常用 必须 参数理解 b.METRIC 度量单位 c.RATIO 百分比尺寸 d.STYLE 容器…
阅读更多...
springboot网上商城系统-计算机毕业设计源码08789

springboot网上商城系统-计算机毕业设计源码08789

摘 要 随着互联网趋势的到来&#xff0c;各行各业都在考虑利用互联网将自己推广出去&#xff0c;最好方式就是建立自己的互联网系统&#xff0c;并对其进行维护和管理。在现实运用中&#xff0c;应用软件的工作规则和开发步骤&#xff0c;采用Java技术建设网上商城系统。 本设…
阅读更多...
MUR6060PT-ASEMI逆变焊机MUR6060PT

MUR6060PT-ASEMI逆变焊机MUR6060PT

编辑&#xff1a;ll MUR6060PT-ASEMI逆变焊机MUR6060PT 型号&#xff1a;MUR6060PT 品牌&#xff1a;ASEMI 封装&#xff1a;TO-247 最大平均正向电流&#xff08;IF&#xff09;&#xff1a;60A 最大循环峰值反向电压&#xff08;VRRM&#xff09;&#xff1a;600V 最大…
阅读更多...
C++:C与C++混合编程

C++:C与C++混合编程

混合编程 为什么需要混合编程 (1)C有很多优秀成熟项目和库&#xff0c;丢了可惜&#xff0c;重写没必要&#xff0c;C程序里要调用 (2)庞大项目划分后一部分适合用C&#xff0c;一部分适合用C (3)其他情况&#xff0c;如项目组一部分人习惯用C&#xff0c;一部分习惯用C 为什么…
阅读更多...
echarts隔行背景色

echarts隔行背景色

看了下使用说明&#xff0c;试了半天终于搞对了 参考文档&#xff1a;Documentation - Apache ECharts option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: bar,mar…
阅读更多...
【实用软件】Internet Download Manager（IDM6.41）下载及安装教程

【实用软件】Internet Download Manager（IDM6.41）下载及安装教程

​数据表明但是能够通过搭配下载的方式来使用IDM&#xff08;比如用迅雷离线下载&#xff0c;115离线&#xff0c;百度网盘等离线下载好的资源&#xff0c;然后结合HTTP协议的特性再用IDM下载&#xff09;能够达到事半功倍的效果。有目共睹的是IDM下载HTTP链接十分快&#xff0…
阅读更多...
华为升腾显卡选型备忘

华为升腾显卡选型备忘

目录 1. 开发套件 2. 加速模块 3. 加速卡 4. 训练卡 官方地址&#xff1a;https://www.hiascend.com/ 备注&#xff1a; &#xff08;1&#xff09;V后缀的都是Video视频解析卡&#xff0c;本质是推理卡&#xff1b; &#xff08;2&#xff09;I后缀的都是推理卡&#…
阅读更多...
（python）小学出题热门词汇可视化绘制

（python）小学出题热门词汇可视化绘制

1.代码 import pandas as pd from wordcloud import WordCloud import matplotlib.pyplot as plt from collections import Counter import jieba # 如果你处理的是中文文本&#xff0c;需要jieba分词 import re # 停用词列表&#xff0c;这里只是示例&#xff0c…
阅读更多...
Swift 周报 第五十四期

Swift 周报 第五十四期

文章目录 前言新闻和社区苹果上架 iPhone 14/Pro 官翻机&#xff1a;起售价不到 5000 元苹果 iPhone SE 4 售价曝光苹果针对欧盟 20 亿美元罚单提起上诉 双方另一场“缠斗”已跨越近八年 提案通过的提案正在审查的提案 Swift论坛推荐博文话题讨论关于我们 前言 本期是 Swift 编…
阅读更多...
SAP ABAP 之OOALV

SAP ABAP 之OOALV

文章目录 前言一、案例介绍/笔者需求二、SE24 查看类 a.基本属性 Properties b.接口 Interfaces c.友元 Friends d.属性 Attributes e.方法 Methods f.事件 Events g.局部类型 Types …
阅读更多...
Vulnhub--AI: WEB: 2

Vulnhub--AI: WEB: 2

渗透复现 平台框架存在目录穿越漏洞&#xff0c;利用该漏洞读取敏感信息 Ping功能点绕过&#xff0c;进行命令执行操作&#xff0c;反弹shell无果后&#xff0c;利用目录穿越漏洞遍历敏感API&#xff0c;读取到用户SSH登录凭证 SSH登录进行Linux lxd容器提权 知识扩展 目录…
阅读更多...
企业运维六边形战士 质量稳定 效率为王

企业运维六边形战士 质量稳定 效率为王

随着信息化的不断深入和扩展&#xff0c;企业IT系统的复杂性和设备多样性日益增加。为了保障业务的高可用性和连续性&#xff0c;企业需要一个全面、高效、智能的一体化运维管理平台。在用户市场的推动下&#xff0c;LinkSLA智能运维管家展现出【六边形战士】的优质属性&#x…
阅读更多...
最年轻的国家最高科技奖得主，量子领域科学家：薛其坤

最年轻的国家最高科技奖得主，量子领域科学家：薛其坤

6月24日&#xff0c;2023年度国家最高科学技术奖在京揭晓&#xff0c;李德仁院士、薛其坤院士获得中国科技界崇高荣誉。 薛其坤是凝聚态物理领域著名科学家&#xff0c;取得多项引领性的重要科学突破&#xff0c;包括&#xff1a;他率领团队首次实验观测到量子反常霍尔效应&am…
阅读更多...
【c语言】二级指针

【c语言】二级指针

1&#xff0c;定义 本质还是从指针的角度去理解&#xff0c;只不过存的指针的值 2&#xff0c;使用方法
阅读更多...
怎么在线一次压缩多张图片？分享3款简单的在线图片压缩工具

怎么在线一次压缩多张图片？分享3款简单的在线图片压缩工具

在日常工作和生活中&#xff0c;经常会需要使用图片处理大小功能&#xff0c;网上有很多的图片压缩工具都能够快速处理图片大小&#xff0c;那么当遇到大量的图片需要压缩大小时&#xff0c;该如何操作才能快速在线压缩图片大小呢&#xff1f;多张图片怎么一次批量压缩&#xf…
阅读更多...
Python 全栈体系【四阶】（六十一）

Python 全栈体系【四阶】（六十一）

第五章 深度学习 十三、自然语言处理&#xff08;NLP&#xff09; 5. NLP应用 5.2 文本情感分析 目标&#xff1a;利用训练数据集&#xff0c;对模型训练&#xff0c;从而实现对中文评论语句情感分析。情绪分为正面、负面两种 数据集&#xff1a;中文关于酒店的评论&#…
阅读更多...
使用Servlet开发javaweb，请求常见错误详解及其解决办法【404、405、500】

使用Servlet开发javaweb，请求常见错误详解及其解决办法【404、405、500】

Servlet报错的情况多种多样&#xff0c;涵盖了配置错误、代码逻辑错误、资源未找到、权限问题等多个方面。以下是一些常见的Servlet报错情况及其可能的原因和解决方法&#xff1a; 404 Not Found: 错误原因图示&#xff1a; URL映射 发送请求&#xff0c;出现404错误 原因: 请…
阅读更多...
基于jeecgboot-vue3的Flowable流程-自定义业务表单处理（一）支持同一个业务多个关联流程的选择支持

基于jeecgboot-vue3的Flowable流程-自定义业务表单处理（一）支持同一个业务多个关联流程的选择支持

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 这部分先讲讲支持自定义业务表单一个业务服务表单多个流程的支持处理 1、后端mapper部分 如下&#xff0c;修改selectSysCustomFormByServiceName为list对象&#xff0c;以便支持多个 &…
阅读更多...
通信系统网络架构_1.局域网网络架构

通信系统网络架构_1.局域网网络架构

当今&#xff0c;通信网络从大的方面主要包括局域网、广域网、移动通信网等网络形式。不同的网络会采用不同的技术进行网络构建。以下针对不同的网络给出各自的网络架构以及所采用的技术。 1.概述 局域网&#xff0c;即计算机局部区域网络&#xff0c;是一种为单一机构所拥有的…
阅读更多...
Simufact Additive增材制造支撑创建功能

Simufact Additive增材制造支撑创建功能

增材制造工艺作为近年来制造行业的顶流&#xff0c;一直备受各行业关注。除了率先大范围展开增材制造应用的航空行业&#xff0c;在汽车、电子乃至医疗行业也都有了不俗的进展。深谙增材制造工艺的学者都直言&#xff1a;使用3D打印简单&#xff0c;但应用好比较难。那是因为这…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023