前言：当下音乐播放器不胜其数，为了更好的掌握一些东西，我们来自己制作一个音乐播放器。
正常情况下我们的开发都会有构思图以及模块规划等过程，我们先来看看大致的页面构图：
项目文件布局：
首先新建文件为h5+app项目，那么我们来看看其中index的页面：
DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>title> <script src="./js/mui.min.js">script> <link href="./css/mui.min.css" rel="stylesheet"/> <script src="./js/vue.min.js">script> <link rel="stylesheet" href="./css/vant.mim.css" rel="external nofollow" target="_blank" > <script src="./js/vant.min.js" rel="external nofollow" >script> <link rel="stylesheet" type="text/css" href="css/index.css"/> <script type="text/javascript" src="./js/jquery.min.js">script> head><body> <div id="app"> <div class="head"> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">音乐播放器h1> header> div> <div> <van-notice-bar text="所有歌曲来自网易云，若有侵权联系邮箱（1848514604@qq.com）" left-icon="volume-o" /> div> <div class="contents"> <span style="display: inline-block;width: 100%;height: 5%;line-height:1.875rem;text-align: center;">当前存在：<strong>{{musicData.length}}strong>首歌曲(歌曲每天会进行实时更新)span> <div class="contents_bottom"> <ul> <li @click="seeMsg(index,item)" v-for="(item,index) in musicData" :key="index"><span style="padding-left: 0.625rem;font-size: 0.875rem;">{{index+1}}span> <span class="mui-icon mui-icon-arrowthinright">span> <a href="javascript:;" :title="item" style="color: #000000;font-size: 1.125rem;"> <span style="margin-left: 3.125rem; ">{{item.substring(0,item.length-4)}}span> a> li> ul> div> div> div> <script type="text/javascript" charset="utf-8"> mui.init(); var app = new Vue({ el: "#app", data: { // 存储所有音乐 musicData:[] }, created() { this.get() }, methods:{ //初始化获取文件列表 get(){ var that=this $.get("http://www.jcsy.work:3333/see_music").then(res=>{ if(res.code===200){ vant.Toast("初始化数据获取成功！"); //vue中的渲染 that.musicData=res.data } }).catch(e=>{ vant.Toast.fail("服务异常，请稍候重试！"); }) }, // 点击跳转传参事件 seeMsg(index,item){ console.log(item) mui.openWindow({ url:"music.html", extras: { //extras里面的就是参数了 name:{ item:item, index:index } }, }) } } }) script>body>html>引入的文件都是通过下载本地的，为了减少app运行时数据加载的请求
doctype html><html> <head> <meta charset="utf-8"> <title>title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.css" rel="stylesheet" /> <link href="css/mui.min.css" rel="stylesheet"/> <script src="js/mui.js">script> <script src="./js/vue.min.js">script> <link rel="stylesheet" href="./css/vant.mim.css" rel="external nofollow" target="_blank" > <script src="./js/vant.min.js" rel="external nofollow" >script> <link rel="stylesheet" type="text/css" href="css/index.css"/> <script type="text/javascript" src="./js/jquery.min.js">script> head> <body> <div id="music"> <div class="head"> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">a> <h1 class="mui-title">{{names.substring(0,names.length-4)}}h1> header> div> <div style="height: 93%;" class="contents"> <div class="img_photo"> <img id="imgshow" src="./img/zxc.jpg" > div> <div class="music_words"> <div> <van-progress :percentage="count" pivot-text="" stroke-width="15"/> div> <span>歌曲全名：{{names}}span><br> <p> <span> {{musicNow}} / {{musicLength}} span> p> <span>暂无歌词，持续更新中...span> div> <div class="music_manager"> <img src="img/up.png" @click="upMusic"> <img id="start" src="./img/pause.png" @click="loadMusic"> <img src="img/down.png" @click="downMusic"> div> <div style="width: 100%;height: 5%;background-color: #dfdfdf;text-align: center;line-height:2.1875rem;"> <span> Copyright©2021 <strong>叫做长大strong> span> div> <audio id="audio" :src="musicname" preload> div> div> <script type="text/javascript"> mui.init() mui.plusReady(function(){ var self = plus.webview.currentWebview(); var name = self.name;//获得参数 var app = new Vue({ el: "#music", data() { return{ //标题栏的歌曲名 names:"", //播放音乐的链接 musicname:"", //存储歌曲名的 musicData:[], //歌曲的总长度 musicLength:"", //当前歌曲的进度 musicNow:"00:00", //进度条的百分比 count:"" } }, created() { var that=this that.names=name.item that.musicname="http://www.jcsy.work:3333/music/"+(name.item) that.get() // 初始化获取歌曲时长 setTimeout(function(){ var music = document.getElementById("audio"); that.musicLength=that.secondToTimeStr(Math.round(music.duration)) },500) }, methods:{ // 刷新所有的数据 get(){ var that=this $.get("http://www.jcsy.work:3333/see_music").then(res=>{ if(res.code===200){ that.musicData=res.data } }).catch(e=>{ vant.Toast.fail("服务异常，请稍候重试！"); }) }, // 上一首 upMusic(){ var that=this var music = document.getElementById("audio"); if(name.index<0){ name.index=that.musicData.length+1 } that.musicNow="00:00" $("#start").attr("src","./img/pause.png") name.index-- that.names=that.musicData[name.index] that.musicname="http://www.jcsy.work:3333/music/"+that.names // $("#start").attr("src","./img/start.png") that.musicLength=that.secondToTimeStr(Math.round(music.duration)) that.getMusic() music.play() }, // 下一首 downMusic(){ var that=this var music = document.getElementById("audio"); if(name.index>=that.musicData.length){ name.index=-1 }
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/121474.html
阅读 3291·2021-10-20 13:49
阅读 2594·2021-09-29 09:34
阅读 3485·2021-09-01 11:29
阅读 2972·2019-08-30 11:01
阅读 708·2019-08-29 17:10
阅读 686·2019-08-29 12:48
阅读 2662·2019-08-29 12:40
阅读 1129·2019-08-29 12:30
