資訊專欄INFORMATION COLUMN
前言：當下音樂播放器不勝其數，為了更好的掌握一些東西，我們來自己制作一個音樂播放器。
正常情況下我們的開發都會有構思圖以及模塊規劃等過程，我們先來看看大致的頁面構圖：
項目文件布局：
首先新建文件為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 }
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/121474.html
閱讀 3420·2021-10-20 13:49
閱讀 2793·2021-09-29 09:34
閱讀 3691·2021-09-01 11:29
閱讀 3080·2019-08-30 11:01
閱讀 837·2019-08-29 17:10
閱讀 865·2019-08-29 12:48
閱讀 2775·2019-08-29 12:40
閱讀 1346·2019-08-29 12:30
