音乐播放制作(html css js)

• • 音乐播放/暂停:
  • 音量
  • 关于选择器
  • 效果图:

1.提出问题

和音乐有关的一些代码?
音乐播放/暂停/?
音乐的音量?

做的不完善(还有一些没做)欢迎大家评论

音乐代码:
1.

src=“音乐地址”;

video.play();
video.pause();
video.volume 音量值

2.video.volume音量值可以使用
input type=range 滑动条调节,用js:使input的value值给video.volume;

document.getElementsByClassName
document.querySelector 区别

document.getElementsByClassName :元素集合
只能

var button= document.getElementsByClassName(“button”);
button.onclick 错误(button是集合)
button[0].onclick 正确
document.querySelector 获取第一个元素

一点击button 改变:
图片地址切换
音乐地址切换
text里面信息改变
textContent

button1.onclick=function(){
    video.src="../个人页面制作/不是花火呀 - love me (片段).mp3";
    video.play();
    text1.textContent="‖";

    nav1.children[0].style.color="blue";
    image.src="../个人页面制作/2052545.jpg";


    text4.textContent="▷";
    text2.textContent="▷";
    text3.textContent="▷";
    nav1.children[1].style.color="black";
    nav1.children[2].style.color="black";
    nav1.children[3].style.color="black";
}

代码:`

不是花火呀 - love me播放
    ▷

  停止


    ----------以梦为马---播放
        ▷
    
      停止






    ---------赤伶--------播放
        ▷
    
      停止







    ------------演员-----播放
        ▷
    
      停止








    







下一首        上一首

css代码:

.backgroud{
    width: 1920px;
    height: 1080px;
    background-image: url(../个人页面制作/2052882.jpg);

background-repeat: no-repeat;
background-size: 100% 70%;

    
}



.nav{
    width: 320px;
    height: 400px;
    position: absolute;
    top: 50px;
    background-color:  rgba(255, 255, 255, 0.2);;

}
.banner{
    position: absolute;
    top: 130px;
    left: 300px;

width: 1000px;
height: 541px;
background-color: ;



}

.fengjin{

    position: absolute;
    top: 50px;
    right: 0px;

width: 700px;
height: 350px;
background-color: skyblue;


background-repeat: no-repeat;
background-size: 100% 95%;


}

.yingliang{


    position: absolute;
    top: 350px;
    right: 0px;

width: 700px;
height: 50px;
    
background-color:  rgba(255, 255, 255, 0.2);;

}


.yingliang button{
    
}


.nav ul li{

    width: 300px;
    height: 80px;
    background-color:  rgba(255, 255, 255, 0.2);;
    margin-top: 20px;
    color: black;
}


.volume{

width: 300px;


}


.bt{

    position: absolute;
   right: 0px;
    height: 400px;
    width: 100px;
    background-color: purple;

}

js代码:`

var video=document.querySelector('video');
var button1=document.querySelector('.button1');
var button2=document.querySelector('.button2');
var volume=document.querySelector('.volume');
var text1=document.querySelector('.text1');
var text2=document.querySelector('.text2');
var text3=document.querySelector('.text3');
var text4=document.querySelector('.text4');
var nav1=document.querySelector('.nav1');
var button3=document.querySelector('.button3');
var button4=document.querySelector('.button4');
var button5=document.querySelector('.button5');
var button6=document.querySelector('.button6');
var button7=document.querySelector('.button7');
var button8=document.querySelector('.button8');
var image=document.querySelector('.image');
button1.onclick=function(){
    video.src="../个人页面制作/不是花火呀 - love me (片段).mp3";
    video.play();
    text1.textContent="‖";

    nav1.children[0].style.color="blue";
    image.src="../个人页面制作/2052545.jpg";


    text4.textContent="▷";
    text2.textContent="▷";
    text3.textContent="▷";
    nav1.children[1].style.color="black";
    nav1.children[2].style.color="black";
    nav1.children[3].style.color="black";
}

button2.onclick=function(){
    video.pause();
    text1.textContent="▷";
    nav1.children[0].style.color="black";
    
    

nav1.children[1].style.color="blue";
}
button3.onclick=function(){
    video.src="../个人页面制作/1个球 - 以梦为马(片段).mp3";
    image.src="../个人页面制作/2052461.jpg";
    video.play();
    text2.textContent="‖";

    nav1.children[1].style.color="blue";

    text1.textContent="▷";
    text4.textContent="▷";
    text3.textContent="▷";
    nav1.children[0].style.color="black";
    nav1.children[2].style.color="black";
    nav1.children[3].style.color="black";



}

button4.onclick=function(){
    video.pause();
    text2.textContent="▷";
    nav1.children[1].style.color="black";

}

button5.onclick=function(){
    video.src="../个人页面制作/HITA - 赤伶.mp3";
    video.play();
    text3.textContent="‖";

    nav1.children[2].style.color="blue";
image.src="../个人页面制作/2052882.jpg";
text1.textContent="▷";
    text4.textContent="▷";
    text2.textContent="▷";
    nav1.children[0].style.color="black";
    nav1.children[1].style.color="black";
    nav1.children[3].style.color="black";
}

button6.onclick=function(){

    video.pause();
    text3.textContent="▷";
    nav1.children[2].style.color="black";
}


button7.onclick=function(){
    video.src="../个人页面制作/薛之谦 - 演员.mp3";
    image.src="../个人页面制作/2052182.jpg";
    video.play();

    text4.textContent="‖";

    nav1.children[3].style.color="blue";

    text1.textContent="▷";
    text2.textContent="▷";
    text3.textContent="▷";
    nav1.children[0].style.color="black";
    nav1.children[2].style.color="black";
    nav1.children[1].style.color="black";
}

button8.onclick=function(){
    video.pause();
    text4.textContent="▷";
    nav1.children[3].style.color="black";
}


volume.onchange=function(){
console.log(volume.value);
video.volume=volume.value;

}