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

如何使用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>