如何使用uni-app做一个音乐播放器

uni-app提供给我们非常棒的API，可以做出很好看的自定义样式的音乐播放器

好的编译器可以让我们的项目事半功倍，HBuilderX可以很方便的创建uni-app项目，文件-新建-项目-uni-app项目-创建

首先我们先写一个简单的样式，一个歌曲列表和一个播放器
我的icon图标使用的是阿里巴巴的icon图标库https://www.iconfont.cn/ 不知道怎么使用的请自行百度

<template><view class="content"><!-- 音乐列表 --><view class="menu1"><view class="menu1_item" v-for="(item,i) in menu1" :key="i"><view class="item_warp" @click="playAudio(i)"><view class="item_icon t-icon" :class="item.isPlay?'t-icon-ziyuanldpi':'t-icon-bofang1'"></view><view class="item_title">{{item.title}}</view></view></view></view><!-- 播放器 --><view class="bar_warp" ref="bar_warp"><view class="bar_progress" ref="bar_progress"><view class="progress_warp"><view class="bar_left"><img :src="current.poster" alt=""></view><view class="bar_mid"><view class="name">{{current.name}}</view><view class="author">{{current.author}}</view><view class="bar" ref="bar"><span class="icon" ref="icon"></span></view></view><view class="bar_right t-icon" :class="isPlay?'t-icon-bofang':'t-icon-bofang4'" @click="playBtn"></view></view></view></view></view>
</template>

接下来我们定义数据和方法，音频文件和图标可以用自己的代替，注意路径要正确

<script>//创建innerAudioContext对象应该是全局对象，否则会出现多个音频同时播放的情况const innerAudioContext = uni.createInnerAudioContext();innerAudioContext.autoplay = true;export default {data() {return {isPlay: false,menu1: [{title: "哥只是个传说",isPlay: false,src: "../../static/audio/陈旭 - 哥 只是个传说.mp3",img: 'http://p2.music.126.net/7RItheuGL6uP4YfZj3CW8w==/27487790706531.jpg',name: "哥只是个传说",author: "陈旭"},{title: "DJBeat_老果",isPlay: false,src: "../../static/audio/DJ_Beat老果 - WOD.mp3",img: 'http://p2.music.126.net/7RItheuGL6uP4YfZj3CW8w==/27487790706531.jpg',name: "DJBeat_老果",author: "未知"},{title: "哥只是个传说",isPlay: false,src: "../../static/audio/陈旭 - 哥 只是个传说.mp3",img: 'http://p2.music.126.net/7RItheuGL6uP4YfZj3CW8w==/27487790706531.jpg',name: "哥只是个传说",author: "陈旭"},],current: {poster: '../../static/img/未知.png',name: '未知',author: '未知歌手',src: '',},}},components: {},mounted() {//操作dom，添加移动端的触摸事件const bar = this.$refs.barconst icon = this.$refs.iconlet maxScroll = 0let timeChangeX = 0let flag = false//添加icon的触摸事件//基于触摸开始事件上在监听触摸移动和触摸停止的事件let offsetX = 0//进度条随着音乐的播放进度而改变innerAudioContext.onTimeUpdate(() => {if (!flag) {maxScroll = bar.$el.clientWidth - icon.clientWidthlet progress = innerAudioContext.currentTime / innerAudioContext.durationlet position = maxScroll * progressicon.style.transform = `translate(${position}px,-50%)`//记录偏移位置timeChangeX = position}})icon.addEventListener('touchstart', (ev) => {flag = truemaxScroll = bar.$el.clientWidth - icon.clientWidth//记录开始的位置const startX = ev.changedTouches[0].clientXconst touchmoveCallback = (ev) => {//计算偏移量offsetX = ev.changedTouches[0].clientX - startX + timeChangeX//约束偏移量if (offsetX < 0) {offsetX = 0}if (offsetX > maxScroll) {offsetX = maxScroll}// console.log(offsetX)//手指移动多少，就让icon标签在当前位置跟着偏移多少icon.style.transform = `translate(${offsetX}px,-50%)`// console.log(progress)}const touchendCallback = (ev) => {flag = falsemaxScroll = bar.$el.clientWidth - icon.clientWidth//偏移多少,音乐就偏移多少let progress = offsetX / maxScrolllet currentTime = innerAudioContext.duration * progressinnerAudioContext.seek(currentTime)//移除监听document.removeEventListener('touchmove', touchmoveCallback)document.removeEventListener('touchend', touchendCallback)}//添加监听document.addEventListener('touchmove', touchmoveCallback)document.addEventListener('touchend', touchendCallback)})},onLoad() {},methods: {playAudio: function(i) {if (!this.menu1[i].isPlay) {this.isPlay = truefor (let j = 0; j < this.menu1.length; j++) {if (this.menu1[j].isPlay && j != i) {this.menu1[j].isPlay = !this.menu1[j].isPlay}}this.menu1[i].isPlay = !this.menu1[i].isPlaythis.$refs.bar_warp.$el.style.display = 'flex'this.current.poster = this.menu1[i].imgthis.current.name = this.menu1[i].namethis.current.author = this.menu1[i].authorthis.current.src = this.menu1[i].srcinnerAudioContext.src = this.current.src}},playBtn: function() {if (innerAudioContext.paused) {innerAudioContext.play()this.isPlay = true} else {innerAudioContext.pause() //暂停innerAudioContext.onPause(() => {console.log("总共：" + innerAudioContext.duration)console.log("当前：" + innerAudioContext.currentTime)})this.isPlay = false}}}}
</script>

css代码如下，仅供参考


<style lang="scss">* {margin: 0;padding: 0;font-weight: 200;font-size: 13px;}.content {width: 100%;color: white;.menu1 {width: 100%;display: flex;flex-direction: column;align-items: center;background-color: white;.menu1_item {width: 80%;height: 40px;color: black;display: flex;align-items: center;.item_warp {display: flex;.item_icon {width: 22px;height: 22px;}.item_title {margin-left: 10px;}}}}.bar_warp {height: 60px;display: none;}.bar_progress {position: fixed;bottom: 0rpx;width: 100%;height: 60px;display: flex;justify-content: center;align-items: center;background-color: rgb(240, 240, 240);.progress_warp {width: 95%;height: 100%;display: flex;justify-content: space-between;align-items: center;.bar_left {background-color: red;width: 12%;display: flex;justify-content: center;align-items: center;img {width: 100%;}}.bar_mid {display: flex;flex-direction: column;justify-content: space-between;height: 70%;width: 65%;.name {color: black;font-size: 15px;font-weight: 600;}.author {color: rgba($color: #000000, $alpha: .3);font-size: 11px;}.bar {height: 4px;width: 100%;background-color: #ddd;.icon {position: relative;top: 50%;left: 0;transform: translate(-50%, -50%);display: block;width: 5px;height: 4px;background: rgba($color: #7bd25c, $alpha: 1.0);border-radius: 50%;&::before {content: "";position: absolute;top: -5px;left: -5px;bottom: -5px;right: -5px;}}}}.bar_right {width: 35px;height: 35px;background-repeat: no-repeat;background-size: cover;background-position: 50% 50%;}}}//引入图标@font-face {font-family: 'iconfont';/* Project id 2634205 */src: url('https://at.alicdn.com/t/font_2634205_tfx2rjy7ocd.woff2?t=1624629652226') format('woff2'),url('https://at.alicdn.com/t/font_2634205_tfx2rjy7ocd.woff?t=1624629652226') format('woff'),url('https://at.alicdn.com/t/font_2634205_tfx2rjy7ocd.ttf?t=1624629652226') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 14px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}}@import '../../static/iconfont-weapp-icon.css';
</style>

希望我的代码能够帮助你学习，如果有问题可以联系我共同交流进步

如何使用uni-app做一个音乐播放器相关推荐

23|VS2017 基于MFC 做一个音乐播放器，带音量调节，切换歌曲
最近接到个小任务,用MFC做一个音乐播放器,不过这也是一直想尝试的,于是今天早上9点到下午16:00,总算是完成了需要的功能开门见山,先展示一下整体界面下面按照功能模块介绍我做这个播放器的过程预 ...
用React做一个音乐播放器
介绍任何正在学习 React 并想使用 React 构建项目的人.有各种博客和文章可以为开发人员指导此类项目.我确实浏览过这些文章,但其中总是缺少一种项目.缺少的项目是音乐播放器和视频播放器.这两个 ...
android做一个音乐播放器,制作一个简单的Android版的音乐播放器
音乐播放器是一个非常常见的应用,这篇博客就是介绍如何制作一个简单的音乐播放器,这款音乐播放器具有以下的功能:播放歌曲.暂停播放歌曲..显示歌曲的总时长.显示歌曲的当前播放时长.调节滑块可以将歌曲调节到 ...
手把手教你10分钟做一个音乐播放器
一.话不多,先看效果: 视频B站效果演示地址~ (大佬勿入,大佬勿入,大佬勿入)这是个单页面音乐播放器,只用到了 html+css 与很基础的vue语法,所以适合初学者,看一看10分钟就会了~ 这个 ...
用vue做一个音乐播放器
xz-music 音乐播放器(web移动端) 开源协议MIT License github: https://github.com/huangweizhi/xz-music.git gitee: ht ...
JS和H5做一个音乐播放器，附带源码
http://mp.weixin.qq.com/s/KpXT9X46AMlUVXQvpHuXGQ 效果图: 实现的功能 1.首页 2.底部播放控件 3.播放页面 4.播放列表 5.排行榜 6.音乐搜索 ...
用js，css做一个音乐播放器
做好如图所示: 下面开始上代码: html代码: <!DOCTYPE html> <html lang="en"> <head> <met ...
教你用树莓派Python打造一个音乐播放器
买了个树莓派3B+,装好系统后灰落了好厚一层都不知道要干嘛...最近突发奇想:用树莓派做一个音乐播放器,每天6:30-7:20自动播放英语听力,强迫自己练习英语,也治治自己的懒床习惯,平时也可以用来听 ...
一个音乐播放器的踩坑实践
前言这是这个系列的第二篇文章,和第一篇文章相同的是Demo中的资源文件和一些关键代码是搜索和学习得来的.一是因为没有相关的资源文件,譬如音乐文件.歌词文件.歌曲封面等:二是着实有点力有未逮的感觉(p ...

如何使用uni-app做一个音乐播放器

如何使用uni-app做一个音乐播放器

如何使用uni-app做一个音乐播放器相关推荐

最新文章

热门文章