0
我正在爲娛樂網站構建自定義mp3播放器，即使在播放歌曲時我也需要連續添加歌曲。要做到這一點，我使用這個功能。將歌曲添加到Jquery JAudio播放列表中，無需刷新播放器
var temp = [];
var tempObj = [];
function popUp(file,thumb,trackName,trackArtist,trackAlbum) {
var validate = true;
if (temp.length>0) {
for (var x = 0; x < temp.length; x++) {
if (temp[x]['trackName'] == trackName) {
validate = false;
}
}
}
if (validate==true){
// Save data to object
tempObj = { file: file, thumb: thumb, trackName: trackName, trackArtist: trackArtist, trackAlbum: trackAlbum };
temp.push(tempObj); // push object to existing array
$("#player").jAudio({playlist: temp});
}
}
問題是，要將歌曲添加到播放器中，我們需要運行該「jAudio（）」函數。因爲每次「popUp（）」函數都會調用它來調用「jAudio（）」函數。如果有人有解決方案，請剪切它。
這是JAudio API。
!function (t) {
function i(i, a) {
this.settings = t.extend(!0, r, a), this.$context = i, this.domAudio = this.$context.find("audio")[0], this.$domPlaylist = this.$context.find(".jAudio--playlist"), this.$domControls = this.$context.find(".jAudio--controls"), this.$domVolumeBar = this.$context.find(".jAudio--volume"), this.$domDetails = this.$context.find(".jAudio--details"), this.$domStatusBar = this.$context.find(".jAudio--status-bar"), this.$domProgressBar = this.$context.find(".jAudio--progress-bar-wrapper"), this.$domTime = this.$context.find(".jAudio--time"), this.$domElapsedTime = this.$context.find(".jAudio--time-elapsed"), this.$domTotalTime = this.$context.find(".jAudio--time-total"), this.$domThumb = this.$context.find(".jAudio--thumb"), this.currentState = "pause", this.currentTrack = this.settings.defaultTrack, this.timer = void 0, this.init()
}
function a(t, i) {
for (var t = String(t); t.length < i;)t = "0" + t;
return t
}
var e = "jAudio", r = {
playlist: [],
defaultAlbum: void 0,
defaultArtist: void 0,
defaultTrack: 0,
autoPlay: !1,
debug: !1
};
i.prototype = {
init: function() {
var t = this;
t.renderPlaylist(), t.preLoadTrack(), t.highlightTrack(), t.updateTotalTime(), t.events(), t.debug(), t.domAudio.volume = .2
}, play: function() {
var t = this, i = t.$domControls.find("#btn-play");
t.currentState = "play", t.domAudio.play(), clearInterval(t.timer), t.timer = setInterval(t.run.bind(t), 50), i.data("action", "pause"), i.attr("id", "btn-pause"), i.toggleClass("active")
}, pause: function() {
var t = this, i = t.$domControls.find("#btn-pause");
t.domAudio.pause(), clearInterval(t.timer), t.currentState = "pause", i.data("action", "play"), i.attr("id", "btn-play"), i.toggleClass("active")
}, stop: function() {
var t = this;
t.domAudio.pause(), t.domAudio.currentTime = 0, t.animateProgressBarPosition(), clearInterval(t.timer), t.updateElapsedTime(), t.currentState = "stop"
}, prev: function() {
var t, i = this;
t = 0 === i.currentTrack ? i.settings.playlist.length - 1 : i.currentTrack - 1, i.changeTrack(t)
}, next: function() {
var t, i = this;
t = i.currentTrack === i.settings.playlist.length - 1 ? 0 : i.currentTrack + 1, i.changeTrack(t)
}, preLoadTrack: function() {
var t = this;
t.changeTrack(t.settings.defaultTrack), t.settings.autoPlay && t.play()
}, changeTrack: function (t) {
var i = this;
i.currentTrack = t, i.domAudio.src = i.settings.playlist[t].file, i.highlightTrack(), i.updateThumb(), i.renderDetails(), "play" === i.currentState && i.play()
}, events: function() {
var i = this;
i.$domControls.on("click", "button", function() {
var a = t(this).data("action");
switch (a) {
case"prev":
i.prev.call(i);
break;
case"next":
i.next.call(i);
break;
case"pause":
i.pause.call(i);
break;
case"stop":
i.stop.call(i);
break;
case"play":
i.play.call(i)
}
}), i.$domPlaylist.on("click", ".jAudio--playlist-item", function() {
var a = t(this), e = (a.data("track"), a.index());
i.currentTrack !== e && i.changeTrack(e)
}), i.$domProgressBar.on("click", function (t) {
i.updateProgressBar(t), i.updateElapsedTime()
}), t(i.domAudio).on("loadedmetadata", function() {
i.animateProgressBarPosition.call(i), i.updateElapsedTime.call(i), i.updateTotalTime.call(i)
})
}, getAudioSeconds: function (t) {
var t = t % 60;
return t = a(Math.floor(t), 2), t = 60 > t ? t : "00"
}, getAudioMinutes: function (t) {
var t = t/60;
return t = a(Math.floor(t), 2), t = 60 > t ? t : "00"
}, highlightTrack: function() {
var t = this, i = t.$domPlaylist.children(), a = "active";
i.removeClass(a), i.eq(t.currentTrack).addClass(a)
}, renderDetails: function() {
var t = this, i = t.settings.playlist[t.currentTrack], a = (i.file, i.thumb, i.trackName), e = i.trackArtist, r = (i.trackAlbum, "");
r += "<p>", r += "<span>" + a + "</span>", r += "<span>" + e + "</span>", r += "</p>", t.$domDetails.html(r)
}, renderPlaylist: function() {
var i = this, a = "";
t.each(i.settings.playlist, function (t, i) {
{
var e = i.file, r = i.thumb, o = i.trackName, s = i.trackArtist;
i.trackAlbum
}
trackDuration = "00:00", a += "<div class='jAudio--playlist-item' data-track='" + e + "'>", a += "<div class='jAudio--playlist-thumb'><img src='" + r + "'></div>", a += "<div class='jAudio--playlist-meta-text'>", a += "<h4>" + o + "</h4>", a += "<p>" + s + "</p>", a += "</div>", a += "</div>"
}), i.$domPlaylist.html(a)
}, run: function() {
var t = this;
t.animateProgressBarPosition(), t.updateElapsedTime(), t.domAudio.ended && t.next()
}, animateProgressBarPosition: function() {
var t = this, i = 100 * t.domAudio.currentTime/t.domAudio.duration + "%", a = {width: i};
t.$domProgressBar.children().eq(0).css(a)
}, updateProgressBar: function (t) {
var i, a, e, r = this;
t.offsetX && (i = t.offsetX), void 0 === i && t.layerX && (i = t.layerX), a = i/r.$domProgressBar.width(), e = r.domAudio.duration * a, r.domAudio.currentTime = e, r.animateProgressBarPosition()
}, updateElapsedTime: function() {
var t = this, i = t.domAudio.currentTime, a = t.getAudioMinutes(i), e = t.getAudioSeconds(i), r = a + ":" + e;
t.$domElapsedTime.text(r)
}, updateTotalTime: function() {
var t = this, i = t.domAudio.duration, a = t.getAudioMinutes(i), e = t.getAudioSeconds(i), r = a + ":" + e;
t.$domTotalTime.text(r)
}, updateThumb: function() {
var t = this, i = t.settings.playlist[t.currentTrack].thumb, a = {"background-image": "url(" + i + ")"};
t.$domThumb.css(a)
}, debug: function() {
var t = this;
t.settings.debug && console.log(t)
}
}, t.fn[e] = function (a) {
var e = function() {
return new i(t(this), a)
};
t(this).each(e)
}
}(jQuery);
// initialize
(function() {
}());
它不提供任何API來添加播放列表中的曲目嗎？ –
沒有..有沒有什麼辦法可以用這個功能完成它.. –
您必須在插件代碼中添加一個新的原型函數，它可以重新呈現您的播放列表。然後在你的插件實例上調用該函數。 –