js简单开发的音乐播放器

最新推荐文章于 2024-08-08 08:27:10 发布

万能守恒定律

最新推荐文章于 2024-08-08 08:27:10 发布

阅读量2k

点赞数 3

分类专栏： h5+c3 文章标签： javascript css css3

本文链接：https://blog.csdn.net/qq_50951790/article/details/127851834

版权

h5+c3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这个博客介绍了如何使用HTML、CSS和JavaScript创建一个简单的音乐播放器。通过CSS定义样式，JavaScript处理播放、暂停、音量控制及歌曲切换等功能，实现了音乐播放器的基本操作。音乐文件存储在'music'文件夹中，用户可以通过上一首、下一首按钮进行歌曲切换，播放状态通过播放和暂停按钮显示。

摘要由CSDN通过智能技术生成

1.此项以js为基础，开发的一个简单的音乐播放器

（1）首先根据下面的文件创建一个文件夹

（2）css里面是main.css

img{
	width: 790px;
	height: 400px;
}
ul{
	margin-top: -170px;
	z-index: 2;
	margin-left: 300px;
}
.musicBox {
	font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
	background-color: #212121;
    /*设置边框的弧度值，为3px*/
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
    /*阴影*/
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	-webkit-box-shadow: 10px 10px 25px #ccc;
	-moz-box-shadow: 10px 10px 25px #ccc;
	box-shadow: 10px 10px 25px #ccc;
    /*透明度*/
	opacity: 0.9;
    /*基本性质*/
	padding: 2px 5px;
	position: absolute;
	z-index: 9;
	border-width: 1px;
	border-style: solid;
	border-color: #488BF0 #488BF0 #488BF0 #488BF0;
	width: 775px;
	height: 40px;
}

.leftControl {
	width: 0px;
	padding: 10px 10px 10px 10px;
	float: left;
	height: 20px;
	background: url(../images/sk-dark.png) left 2px no-repeat;
	margin-right: 8px;
	margin-left: 10px;
}

.leftControl:hover {
	background: url(../images/sk-dark.png) left -30px no-repeat;
}

.mainControl {
	width: 25px;
	padding: 10px 15px 5px 10px;
	float: left;
	height: 20px;
	background: url(../images/sk-dark.png) -80px -130px no-repeat;
}

.mainControl:hover {
	background: url(../images/sk-dark.png) -80px -166px no-repeat;
}

.rightControl {
	width: 0px;
	padding: 10px 10px 10px 10px;
	float: left;
	height: 20px;
	background: url(../images/sk-dark.png) left -62px no-repeat;
	margin-right: 8px;
}

.rightControl:hover {
	background: url(../images/sk-dark.png) left -93px no-repeat;
}

.processControl {
	width: 500px;
	padding: 5px 10px 10px 10px;
	float: left;
	height: 20px;
	margin-right: 12px;
	color: #ffffff;
}

.processControl .songName {
	float: left;
}

.processControl .songTime {
	float: right;
}

.processControl .process {
	width: 500px;
	float: left;
	height: 2px;
	cursor: pointer;
	background-color: #000000;
	margin-top: 7px;
}

.processControl .processYet {
	width: 0px;
	position: absolute;
	height: 2px;
	left: 131px;
	top: 30px;
	cursor: pointer;
	background-color: #7A8093;
}

.voiceEmp {
	width: 0px;
	padding: 10px 10px 10px 10px;
	float: left;
	height: 17px;
	background: url(../images/sk-dark.png) -28px -180px no-repeat;
	margin-right: 2px;
}

.voiceEmp:hover {
	background: url(../images/sk-dark.png) -28px -212px no-repeat;
}

.voidProcess {
	width: 66px;
	height: 2px;
	cursor: pointer;
	background-color: #000;
	float: left;
	margin-top: 19px;
	margin-right: 6px;
}

.voidProcessYet {
	width: 66px;
	position: absolute;
	height: 2px;
	left: 675px;
	top: 21px;
	cursor: pointer;
	background-color: #7A8093;
}

.voiceFull {
	width: 0px;
	padding: 10px 10px 10px 10px;
	float: left;
	height: 17px;
	background: url(../images/sk-dark.png) -28px -116px no-repeat;
}

.voiceFull:hover {
	background: url(../images/sk-dark.png) -28px -148px no-repeat;
}

.stopControl {
	width: 14px;
	padding: 10px 10px 5px 10px;
	float: left;
	height: 20px;
	background: url(../images/sk-dark.png) -50px -130px no-repeat;
	margin-right: 16px;
}

.stopControl:hover {
	background: url(../images/sk-dark.png) -50px -165px no-repeat;
}

(3)images里面有两张图，分别是

（4）js文件夹内容

//判断是否有音频元素
let mysong;
if(window.HTMLAudioElement){
    //获取音频元素
    mysong = document.querySelector("#mysong")
}

let mainControl = document.querySelector("#mainControl");//播放
let stopControl = document.querySelector("#stopControl");//暂停
let leftControl = document.querySelector(".leftControl");//快退
let rightControl = document.querySelector(".rightControl");//快进
let voiceEmp = document.querySelector(".voiceEmp")//静音
let voiceFull = document.querySelector(".voiceFull")//最大音量


mainControl.addEventListener("click",function(){
    //播放音频
    mysong.play();
    mainControl.style.display = "none";//隐藏暂停按钮
    stopControl.style.display = "";//显示我们的暂停按钮
    timeSpan()
});

stopControl.addEventListener("click",function(){
    //暂停音频
    mysong.pause();
    mainControl.style.display = "";//隐藏播放按钮
    stopControl.style.display = "none";//显示我们的播放按钮
    clearInterval(window.setInte)
});

leftControl.addEventListener("click",function(){
    mysong.currentTime -=10.0;//后退
})

rightControl.addEventListener("click",function(){
    mysong.currentTime +=10.0;
})

voiceEmp.addEventListener("click",function(){
    mysong.volume=0;
})

voiceFull.addEventListener("click",function(){
    mysong.volume=1;
})

function timeDispose(time){
    let minutes = parseInt( time/60);
    let seconds = parseInt( time%60);
    minutes = minutes>10?minutes:"0"+minutes;
    seconds =  seconds >10? seconds :"0"+ seconds ;
    return minutes + ":" + seconds;
}



function timeSpan(){
    window.setInte= setInterval(function(){
        //播放时间更新
        let currentTime = mysong.currentTime;
        let duration = mysong.duration;
        let songTime = document.querySelector("#songTime");
        songTime.innerHTML = timeDispose(currentTime)+"|"+timeDispose(duration);
        let process = getwidth("#process");
        let processYet =(currentTime/duration)*process//当前长度
        document.querySelector("#processYet").style.width = processYet+"px"
        console.log(1)
    },1000)
}

function getwidth(domId){
    let dom = document.querySelector(domId).style.width//总长度
    let domInt = dom.split('px')[0];
    return domInt
}

function audioProcess(){
    //音乐播放器
    let musicBoxOffset = document.querySelector("#musicBox").offsetLeft
    //进度条左偏移量
    let processOffset = document.querySelector("#process").offsetLeft;
    console.log("processOffset:"+processOffset)
    //进度条开始坐标
    let processStart = musicBoxOffset+processOffset;
    //已经播放的长度
    let processLength = event.clientX-processStart;
    //时间总长度
    let processAll=getwidth("#process")
    // let audio = document.querySelector("#mysong");
    let currentTime = (processLength/processAll)*mysong.duration;
    mysong.currentTime=currentTime;
    document.querySelector("#processYet").style.width=processLength+"px";
}

var music1=new Array();
    music1=['爱要坦荡荡','北京北京','感恩的心','离不开你','散场的拥抱','偷偷的爱'];
    var num = 0;
    var name = document.getElementById("songName");
   
//上一首
function lastMusic(){
    num=(num+5)%6;
    var mysong = document.getElementById("mysong")
    mysong.src="music/"+music1[num]+".mp3"
    var songName = document.getElementById("songName");
    songName.innerHTML=music1[num]
    document.getElementsByTagName("li")[(num+1)>5?0:(num+1)].style.color=""
    document.getElementsByTagName("li")[num].style.color="red"
    mysong.play()
    document.getElementById("mainControl").style.display="none"
    document.getElementById("stopControl").style.display=""
}
//下一首
function nextMusic(){
    num=(num+1)%6;
    var mysong = document.getElementById("mysong")
    mysong.src="music/"+music1[num]+".mp3"
    var songName = document.getElementById("songName");
    songName.innerHTML=music1[num]
    document.getElementsByTagName("li")[num].style.color="red"
    document.getElementsByTagName("li")[(num-1)<5?0:(num-1)].style.color=""
    mysong.play()
    document.getElementById("stopControl").style.display=""
    document.getElementById("mainControl").style.display="none"
}

（5）music中

(6)5-4.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html5音乐播放器</title>
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <img src="./images/background.webp" alt="">
    <ul>
        <li> 爱要坦荡荡</li>
        <li>北京北京</li>
        <li>感恩的心</li>
        <li>离不开你</li>
        <li>散场的拥抱</li>
        <li>偷偷的爱</li>
    </ul>
    
    <button onclick="lastMusic()">上一首</button>
    <button onclick="nextMusic()">下一首</button>
<div class="musicBox" id="musicBox">
    <audio src="music/1.ogg" id="mysong">
    
    </audio>
    <div class="leftControl"></div>
    <div id="mainControl" class="mainControl"></div>
    <div id="stopControl" class="stopControl" style="display:none"></div>
    <div class="rightControl"></div>
    <div class="processControl" >
        <div id="songName" class="songName">爱要坦荡荡</div>
        <div id="songTime" class="songTime">00:00&nbsp;|&nbsp;00:00</div>
        <div id="process" style="width:500px" class="process" onclick="audioProcess()"></div>
        <div id="processYet" class="processYet"></div>
    </div>
    <div class="voiceEmp"></div>
    <div id="voidProcess" class="voidProcess" style="width:66px"></div>
    <div class="voidProcessYet"  id="voidProcessYet"></div>
    <div class="voiceFull"></div>
</div>
</body>
<script src="js/player.js" type="text/javascript" charset="utf-8"></script>


</html>

最终结果