-2
私はオブジェクト指向のジュークボックスを作っていますが、何らかの理由でシャッフルボタンがクリックされても機能しません。しかし、それはいくつかの理由のために働いていない。誰かが私が間違ってやっているか説明していただけますか？Jukebox.randomは機能ではありません "、シャッフルボタンが機能しない
// defines the Jukebox object
var Juke = function(songList) {
// the code for what happens when you create a Jukebox object
// goes here
//sets list of songs by a tag elements in html
//initialize songNumber to 0
//initialize currentSong to the songList's songnumber
//initialize timeinsong to 0
this.songList = document.getElementById('playlist').getElementsByTagName('A'),
// the code for playing a song would go here
this.songNumber = 0,
this.currentSong = this.songList[this.songNumber],
this.timeInSong = 0,
//function to play jukebox
this.play = function() {
// if pl
if (document.getElementById('play').classList.contains('fa-play-circle-o')) {
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
document.getElementById('play').classList.remove('fa-play-circle-o');
document.getElementById('play').classList.add('fa-pause-circle-o');
document.getElementById('player').currentTime = this.timeInSong;
var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(0deg); -webkit-transition: -webkit-transform 2s ease;'; //
document.getElementById('vinyl').setAttribute('style', css)
document.getElementById('player').play();
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
} else {
this.timeInSong = document.getElementById('player').currentTime
document.getElementById('player').pause();
document.getElementById('play').classList.remove('fa-pause-circle-o');
document.getElementById('play').classList.add('fa-play-circle-o');
}
},
this.next = function() {
// creates a new Jukebox object method
// this play the next song in the array and removes the li class and adds to the next element in the array
document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight')
this.songNumber++;
//incrementing song number by one
if (this.songNumber == this.songList.length) {
// if the song number is equal to the last element in the arrary start from 0
this.songNumber = 0;
}
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
// add highlight to li song number
this.currentSong = this.songList[this.songNumber]
//currrent song is equal to this song number
document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
if (document.getElementById('play').classList.contains('fa-pause-circle-o')) {
document.getElementById('player').play();
}
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
// setting title of the song to current song name
},
this.stop = function() {
// time of song is -
this.timeInSong = 0;
document.getElementById('seekbar').setAttribute('value', 0);
// adding pause to the player
document.getElementById('player').pause();
// removing pause class
document.getElementById('play').classList.remove('fa-pause-circle-o');
document.getElementById('play').classList.add('fa-play-circle-o');
},
this.previous = function() {
// removing song number highlight class
document.getElementsByTagName('li')[Jukebox.songNumber].classList.remove('highlight');
//decrementing song number by 1
this.songNumber--;
// if song number isless than 0 play the last one
if (this.songNumber <= 0) {
this.songNumber = this.songList.length - 1;
}
document.getElementsByTagName('li')[Jukebox.songNumber].classList.add('highlight');
// adding highlight to current song
this.currentSong = this.songList[this.songNumber]
// current song is this song number
document.getElementById('player').setAttribute("src", this.currentSong.getAttribute('href'));
console.log(document.getElementById('player').getAttribute("src"));
document.getElementById('player').play();
document.getElementById('songTitle').innerHTML = this.currentSong.innerHTML;
// song tittle
},
this.addSong = function() {
// method to add song
var ul = document.getElementById('playlist')
// url
var url = document.getElementById('url').value;
var name = document.getElementById('title').value;
//name is equal to title value
if (url != "" && name != "") {
//i furl and name are not empty
var li = document.createElement('li');
// creting new li element
var atag = document.createElement('a');
atag.setAttribute('href', url);
atag.innerHTML = name;
var but = document.createElement('button');
but.innerHTML = "";
but.setAttribute('onclick', "Jukebox.delete(this)");
// appending user value
li.appendChild(atag);
li.appendChild(but).classList.add('delete', 'fa', 'fa-times');
ul.appendChild(li);
document.getElementById('url').value = '';
document.getElementById('title').value = '';
} else {
alert("Error You haven't Filled in A Form Item")
}
},
this.delete = function(n) {
if (document.getElementById('player').src == n.parentNode.getElementsByTagName('a')[0].getAttribute('href')) {
document.getElementById('player').src = '';
document.getElementById('player').pause();
this.next();
}
n.parentNode.parentNode.removeChild(n.parentNode);
this.songList = document.getElementById('playlist').getElementsByTagName('A');
},
this.preparingToFastForward = function() {
document.getElementById('player').currentTime += document.getElementById('player').currentTime + 100 < document.getElementById('player').duration ? 100 : 0;
},
this.backDatAssUp = function() {
document.getElementById('player').currentTime -= document.getElementById('player').currentTime - 100 > 0 ? 100 : 0;
},
this.listener = function() {
document.getElementById('player').addEventListener("timeupdate", function() {
var currentTime = document.getElementById('player').currentTime;
var duration = document.getElementById('player').duration;
if (currentTime/duration != 1) {
document.getElementById('seekbar').setAttribute('value', currentTime/duration);
var deg = document.getElementById('player').currentTime % 2;
deg = Math.floor(deg % 2) > 0 ? 170 : -170;
console.log(deg)
var css = '-webkit-transform: rotateX(40deg) rotateY(-1deg) rotateZ(-10deg) rotate(' + deg + 'deg); -webkit-transition: -webkit-transform 2s ease;';
document.getElementById('vinyl').setAttribute('style', css)
} else {
Jukebox.next();
}
});
}
}
this.random = function() {
var randomIndex = Math.floor(this.songList.length * Math.random());
this.currentSong = randomIndex;
randomIndex.play();
}
function setVolume() {
var mediaClip = document.getElementById("player");
mediaClip.volume = document.getElementById("volume1").value;
}
var Jukebox = new Juke(document.getElementById('playlist'));<body onload="Jukebox.listener()">
<input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='1'>
<div class='container'>
<div class='recordPlayer'>
<img id='vinyl' class='recordPic' src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRpCviLXje4Wve8WwujEm2luErz6VbuoVFkNW785Kxuap6O1Gpt0eXobRk'>
<img class='recPlayer' src="https://c1.staticflickr.com/3/2260/3694333300_37bd1ff316.jpg">
<img class='recArm' src="arm.png">
<div class='controls'>
<span class='titleTitle'>Currently Playing:<span id='songTitle'></span></span><br>
<audio id='player' src='http://www.archive.org/download/bolero_69/Bolero.mp3'>
</audio>
<progress id="seekbar" value="0" max="1"></progress><br>
<button id='back' class='fa fa-backward' onclick="Jukebox.backDatAssUp()"></button>
<button id='play' class='fa fa-play-circle-o' onclick="Jukebox.play()"></button>
<button id='stop' class='fa fa-stop-circle-o' onclick="Jukebox.stop()"></button>
<button id='previous' class='fa fa-step-backward' onclick="Jukebox.previous()"></button>
<button id='next' class='fa fa-step-forward' onclick="Jukebox.next()"></button>
<button id='back' class='fa fa-forward' onclick="Jukebox.preparingToFastForward()"></button>
<button id='random' onclick="Jukebox.random()"> Rnadom song</button>
</div>
</div>
<div class='listOsongs'>
<ol id="playlist">
<h4>Up Next</h4>
<li>
<a id="song" href="http://www.archive.org/download/bolero_69/Bolero.mp3">
Ravel Bolero
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">
Moonlight Sonata - Beethoven
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="https://cf-media.sndcdn.com/MzhGaP8pde4q.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vTXpoR2FQOHBkZTRxLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODI2Mzh9fX1dfQ__&Signature=SyWy~ghuKuTgWmoMWvnGgA~HArGVxjKkiD61UUENA4Ke-aUgivz4ANDUmNW68-AOE-o-7X~MYn8ObL4AonSuVsPz3LbGPQcmxD-3N14qpCFEx3F4zwZh43v1-aDzlypCRtY6IaEzun9NksxbABrqqL~BokIKSH0U6yxJmEmKq98e8PrUO24IcDHiSZZlviYI-bRRtdsFXxM1bxbYh-s32Rkoihj~uxTOGVDwAADwexg5VT2Z8xAuMj2NJ9vMCYkydhmZGOG4G~SQ3lZE3ODyEtD5Vf6myOMGjhWIq9qss~u6eHJbrQ2AB~oon-44WIqEknjWT63NP-O-WyHCBmAf4w__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
<li>
<a href="https://cf-media.sndcdn.com/zYh4wOY76Fez.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20velloNHdPWTc2RmV6LjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTAyODMzMzN9fX1dfQ__&Signature=nIZ6247SDTQ5LY5pGrdvJkxi3wektW8Kp2uRxOlCg3TthYAq6FeYiu0TJJEdQNNPF8y5WCvbJUi4G553RMwn5xLpxkZR0s0f6B0Fw4m~T18zvic1YH~kRxRVy1ropC2NPax4aI9yCWdKpgFmPNKz21lhFIXoa9F6hnIHaQT0jdFv9eNnjv8CN024j5RnfbFaT1vSzu0AnguXqMlm4uJS8XD~XOT1Y62X4qHzCp685Ahf~Lm9LyhECBXK3nrVF~3QIsxwdYp73Epui29eZsd~7LVCeLwQabU4kvXL9ntTZFft9-JiqLZH4pkmWmSTWlN3Dw~c8dVlZQihruYa81qVPg__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ">
Canon in D Pachabel
</a>
<button class='delete fa fa-times' onclick="Jukebox.delete(this)"></button>
</li>
</ol>
（ 'F12'を打つ）[ブラウザコンソール（開発ツール）]（http://webmasters.stackexchange.com/q/8525）を使用して、エラーをお読みください。 「うまくいきません」は問題の説明ではありません。 – Xufox
jukebox.randomが定義されていません – Andrew
'this.random'の定義を' Juke'関数の外に置きました。 – Xufox