为类创建一个Jukebox但我的功能不起作用

时间:2017-07-22 19:04:41

标签: javascript

我正在创建一个自动点唱机,我觉得我有一切正确,但当我开始播放或暂停时,我的控制台日志中出现了我不明白的错误。这是我的代码

var car = "blue";
console.log(car);

我正在寻找有关如何纠正此问题的一些建议。我一直盯着这个看了一个小时,也许第二双眼睛可以帮忙。

2 个答案:

答案 0 :(得分:0)

根据您的错误,您需要检查您的对象是否未定义。检查您的阵列是否具有该索引是一种很好的做法。好像你的索引可以是-1。

Jukebox.prototype.back = function() {
  this.jamz[index].pause();
  index--;
  
  // put a break point around this line here so you can see the value of your index.
  // make sure you check your array agains undefined if you are not sure this index exist.
  if(typeof(this.jamz[index]) !== 'undefined'){
    this.jamz[index].currentTime = 0;
    this.jamz[index].play();
    if (index === 0) {
      this.jamz[index].currentTime = 0;
      this.jamz[index].play();
    }
  } 
};

答案 1 :(得分:0)

我发现的错误是SyntaxError: unterminated string litera

//figured out next button functionality through indexes. go back up top to 
variables and create and index variable // <= not coommented
Jukebox.prototype.next= function(){

jukebox.addSong(new Audio("audio/Midnight To Monaco - One In A 
Million.mp3")); // <= new line

jukebox.forward is not a function应为jukebox.next()

也没有函数.stop()你应该暂停并将当前时间设置为0

Jukebox.prototype.stop = function() {
  this.jamz[index].pause();
  this.jamz[index].currentTime = 0;
  //this.jamz[index].stop();
}

//pull html buttons
var playBtn = document.getElementById("playBtn");
var pauseBtn = document.getElementById("pauseBtn");
var stopBtn = document.getElementById("stopBtn");
var backBtn = document.getElementById("backBtn");
var nextBtn = document.getElementById("nextBtn");
var index = 0;
//make as JukeBox constructor 
function Jukebox() {
  this.jamz = [];
}

//be able to add songs to the jukebox
Jukebox.prototype.addSong = function(songs) {
  this.jamz.push(songs);
};

//test audio in console log
/*Jukebox.prototype.play = function(){
    var playSong = this.jamz;
    console.log(this.jamz)
}*/

//Be able to push songs into the jukebox. 
//first create a "new" jukebox
var jukebox = new Jukebox();

//use the previous prototype to add songs 

jukebox.addSong(new Audio("https://howlerjs.com/assets/howler.js/examples/player/audio/rave_digger.webm"));
jukebox.addSong(new Audio("https://howlerjs.com/assets/howler.js/examples/player/audio/80s_vibe.webm"));
jukebox.addSong(new Audio("https://howlerjs.com/assets/howler.js/examples/player/audio/running_out.webm"));
//jukebox.addSong(new Audio("audio/Bryson Tiller - Run Me Dry.mp3"));
//jukebox.addSong(new Audio("audio/Midnight To Monaco - One In AMillion.mp3"));


//give each button a method 

Jukebox.prototype.play = function() {
  this.jamz[index].play();
};

Jukebox.prototype.pause = function() {
  this.jamz[index].pause();
};

Jukebox.prototype.stop = function() {
  this.jamz[index].pause();
  this.jamz[index].currentTime = 0;
  //this.jamz[index].stop();
};

//figured out next button functionality through indexes. go back up top to 
//variables and create and index variable 
Jukebox.prototype.next = function() {
  this.jamz[index].pause();
    index++;
    console.log(this.jamz[index]);
  this.jamz[index].currentTime = 0;
    this.jamz[index].play();
  if(index == this.jamz.length) {
    this.index.currentTime = 0;
    this.jamz[index].play();
  }
};

//same functionality as "next except" if statement index will = 0

Jukebox.prototype.back = function() {
  this.jamz[index].pause();
  index--;
  this.jamz[index].currentTime = 0;
  this.jamz[index].play();
  if(index === 0) {
    this.jamz[index].currentTime = 0;
    this.jamz[index].play();
  }
};

//add event listeners to the the buttons I pulled earlier.
playBtn.addEventListener("click", function(event) {
  event.preventDefault();
  jukebox.play();
});

pauseBtn.addEventListener("click", function(event) {
  event.preventDefault();
  jukebox.pause();
});

stopBtn.addEventListener("click", function(event) {
  event.preventDefault();
  jukebox.stop();
});

nextBtn.addEventListener("click", function(event) {
  event.preventDefault();
  jukebox.next();
});

backBtn.addEventListener("click", function(event) {
  event.preventDefault();
  jukebox.back();
});
<input type="button" id="playBtn" value="playBtn">
<input type="button" id="pauseBtn" value="pauseBtn">
<input type="button" id="stopBtn" value="stopBtn">
<input type="button" id="backBtn" value="backBtn">
<input type="button" id="nextBtn" value="nextBtn">