适用于任意音乐APP。点击按钮可实现音乐的播放，这是一款音乐js代码，音乐app视图JS(带声音)
---在线演示
// JavaScript Time!var app = new Vue({ el: "#app", data: { audio: "", imgLoaded: false, currentlyPlaying: false, currentlyStopped: false, currentTime: 0, checkingCurrentPositionInTrack: "", trackDuration: 0, currentProgressBar: 0, isPlaylistActive: false, currentSong: 0, debug: false, musicPlaylist: [ { title: "andy", artist: "阿杜", url: "http://img.bokequ.com/music/andy.mp3", image: "http://www.bokequ.com/show/yinyue/2/images/andy.jpg" }, { title: "留什么给你", artist: "孙楠", url: "http://img.bokequ.com/music/geini.mp3", image: "http://www.bokequ.com/show/yinyue/2/images/3.jpg" }, { title: "在他乡", artist: "水年木华", url: "http://img.bokequ.com/music/zaitaxiang.mp3", image: "https://img4.kuwo.cn/star/albumcover/120/93/5/2858315927.jpg" }, { title: "黄梅戏", artist: "慕容晓晓", url: "http://www.bokequ.com/show/yinyue/3/audio/huangmeixi.mp3", 麻将胡了视频爆分>华体会·hth体育 image: "http://www.bokequ.com/show/yinyue/2/images/huangmeixi.jpg" }], audioFile: "" }, mounted: function () { this.changeSong(); this.audio.loop = false; }, filters: { fancyTimeFormat: function (s) { return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s; } }, methods: { togglePlaylist: function () { this.isPlaylistActive = !this.isPlaylistActive; }, nextSong: function () { if (this.currentSong < this.musicPlaylist.length - 1) this.changeSong(this.currentSong + 1); }, prevSong: function () { if (this.currentSong > 0) this.changeSong(this.currentSong - 1); }, changeSong: function (index) { var wasPlaying = this.currentlyPlaying; this.imageLoaded = false; if (index !== undefined) { this.stopAudio(); this.currentSong = index; } this.audioFile = this.musicPlaylist[this.currentSong].url; this.audio = new Audio(this.audioFile); var localThis = this; this.audio.addEventListener("loadedmetadata", function () { localThis.trackDuration = Math.round(this.duration); }); this.audio.addEventListener("ended", this.handleEnded); if (wasPlaying) { this.playAudio(); } }, isCurrentSong: function (index) { if (this.currentSong == index) { return true; } return false; }, getCurrentSong: function (currentSong) { return this.musicPlaylist[currentSong].url; }, playAudio: function () { if ( this.currentlyStopped == true && this.currentSong + 1 == this.musicPlaylist.length) { this.currentSong = 0; this.changeSong(); } if (!this.currentlyPlaying) { this.getCurrentTimeEverySecond(true); this.currentlyPlaying = true; this.audio.play(); } else { this.stopAudio(); } this.currentlyStopped = false; }, stopAudio: function () { this.audio.pause(); this.currentlyPlaying = false; this.pausedMusic(); }, handleEnded: function () { if (this.currentSong + 1 == this.musicPlaylist.length) { this.stopAudio(); this.currentlyPlaying = false; this.currentlyStopped = true; } else { this.currentlyPlaying = false; this.currentSong++; this.changeSong(); this.playAudio(); } }, onImageLoaded: function () { this.imgLoaded = true; }, getCurrentTimeEverySecond: function (startStop) { var localThis = this; this.checkingCurrentPositionInTrack = setTimeout( function () { localThis.currentTime = localThis.audio.currentTime; localThis.currentProgressBar = localThis.audio.currentTime / localThis.trackDuration * 100; localThis.getCurrentTimeEverySecond(true); }.bind(this), 1000); }, pausedMusic: function () { clearTimeout(this.checkingCurrentPositionInTrack); }, toggleDebug: function () { this.debug = !this.debug; document.body.classList.toggle('debug'); } }, watch: { currentTime: function () { this.currentTime = Math.round(this.currentTime); } }, beforeDestroy: function () { this.audio.removeEventListener("ended", this.handleEnded); this.audio.removeEventListener("loadedmetadata", this.handleEnded); clearTimeout(this.checkingCurrentPositionInTrack); } });
music-app-vue-js，功能模块齐全，100%<
麻将胡了视频爆分strong>华体会·hth体育响应，音乐app界面设计模板，