mp3音乐aKaiyun体育登录入口pp界面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",      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);  } });

这是一款音乐js代码，music-app-vue-js，适用于Kaiyun体育登录入口任意音乐APP。音乐app界面设计模板，