我有一个工作随机的歌曲生成器,它有一个播放和暂停的按钮,以及一个随机化歌曲的按钮.我通过rand和s变量做到这一点,它不是最好的方法,但它的工作原理.我想要显示按钮,以显示该按下时的歌曲是什么,但我不知道id是怎么回事,有人可以帮忙吗?
HTML:
<audio id="1st" >
<source src="intervals/1st.mp3" type = "audio/mp3"/>
</audio>
<audio id="2nd" >
<source src="intervals/2nd.mp3" type = "audio/mp3"/>
</audio>
<audio id="3rd">
<source src="intervals/3rd.mp3" type= "audio/mp3"/>
</audio>
<audio id="4th">
<source src="intervals/4th.mp3" type= "audio/mp3"/>
</audio>
<audio id="5th">
<source src="intervals/5th.mp3" type= "audio/mp3"/>
</audio>
<audio id="6th">
<source src="intervals/6th.mp3" type="audio/mp3" />
</audio>
<audio id="7th">
<source src="intervals/7th.mp3" type="audio/mp3" />
</audio>
<button type="button" id="reveal">Reveal</button>
<button type="button" id="playButton"></button>
<button type="button" id="randomise"></button>
JavaScript的:
var playButtonJS = document.getElementById('playButton');
var randomiseJS = document.getElementById('randomise');
var revealJS = document.getElementById("reveal");
var FstJS = document.getElementById('1st');
var SndJS = document.getElementById('2nd');
var TrdJS = document.getElementById('3rd');
var FOthJS = document.getElementById('4th');
var FIthJS = document.getElementById('5th');
var SIthJS = document.getElementById('6th');
var SEthJS = document.getElementById('7th');
var audioPlaying = [FstJS, SndJS, TrdJS,FOthJS, FIthJS, SIthJS, SEthJS];
var rand = audioPlaying[Math.floor(Math.random() * audioPlaying.length)];
playButtonJS.addEventListener('click', playOrPause, false);
randomiseJS.addEventListener('click', random, false);
revealJS.addEventListener('click', rev, false);
function random() {
rand.pause();
playButtonJS.style.backgroundImage = 'url(playbutton.svg)';
var song = audioPlaying[Math.floor(Math.random() * audioPlaying.length)];
playButtonJS.style.backgroundImage = 'url(pausebutton.png)';
songf(song);
}
function songf(s) {
rand.currentTime=0;
rand = s;
if (!s.paused && !s.ended) {
s.pause();
playButtonJS.style.backgroundImage = 'url(playbutton.svg)';
}
else {
s.play();
playButtonJS.style.backgroundImage = 'url(pausebutton.png)';
}
}
function playOrPause() {
if (!rand.paused && !rand.ended) {
rand.pause();
playButtonJS.style.backgroundImage = 'url(playbutton.svg)';
}
else {
rand.play();
playButtonJS.style.backgroundImage = 'url(pausebutton.png)';
}
}
最佳答案 JQuery解决方案:
为您的rand变量分配正在播放的歌曲的索引的数值,而不是从数组中选择的数据的值.或者将中间变量设为’selectedindex’.
为什么?因为数字可以帮助您在这里引用特定数据.
然后决定如何将信息提供给用户.
想象一下,你放了一些标签< h2 id =“name1”>歌曲名称< / h2> …< h2 id =“name6”> …每个歌曲标签的上升.
最初使用display:none;
.
你可以做类似的事情
function reveal () {
$("#name+rand").style.display = "block";
console.log('You are playing the song number', rand)
}
如果您更喜欢使用公共容器/ div / h2来提供信息,则可以使用以下内容替换内部HTML:
$("#label").html('Song is the number: '+ selectedIndex);
不使用JQuery翻译:
document.getElementById("label").innerHTML = "Song is number" +
String(selectedIndex);
或者使用数字从一系列名称中提供歌曲的名称.
$("#label").html('Song is:'+ ArrayOfNames[selectedIndex]);
不使用JQuery翻译:
document.getElementById("label").innerHTML = "Song is" +
ArrayOfNames[selectedIndex];
编辑:如果您要添加此类功能,我建议您使用JQuery.