html简单的音乐播放器

html

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>简单的音乐播放器</title><link rel="stylesheet" href="indexCss.css"></head><body><div class="music"><h2 class="title">Music Name</h2><div class="player"></div></div></body><script src="indexJS.js"></script>
</html>

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Ubuntu',sans-serif;
}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #f9f9f9;
}.music{}.title{font-weight: 400;font-size: 2em;color: #38a7ff;display: inline-flex;text-align: center;
}.player{position: relative;width: 500px;min-height: 100px;background: #f00;
}

.music{display: flex;justify-content: center;align-items: center;flex-direction: column;
}

.title{font-weight: 400;font-size: 2em;color: #38a7ff;display: inline-flex;text-align: center;margin-bottom: 20px;
}

修改.player css

.player{position: relative;width: 500px;min-height: 100px;background: #fbfbfb;border: 2px solid #fff;border-radius: 80px;padding: 20px 30px;box-shadow: -10px -10px 15px #fff,10px 10px 15px rgba(0,0,0,0.1),inset -5px -5px 15px #fff,inset 5px 5px 15px rgba(0,0,0,0.1);
}

ionicons官网
搜索 play
添加html <div class="player"></div>：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>简单的音乐播放器</title><link rel="stylesheet" href="indexCss.css"></head><body><div class="music"><h2 class="title">Music Name</h2><div class="player"><audio src=""></audio><div class="btns"><span class="prev"><ion-icon name="play-back-outline"></ion-icon></span><span class="playPause"><ion-icon name="play-outline"></ion-icon></span><span class="next"><ion-icon name="play-forward-outline"></ion-icon></span></div></div></div></body><script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script><script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script><script src="indexJS.js"></script>
</html>

修改它们的css布局

.btns{position: relative;display: flex;justify-content: space-between;align-items: center;width: 100%;
}
.btns span{position: relative;width: 80px;height: 80px;border-radius: 50%;background: #fff;display: flex;justify-content: center;align-items: center;color: #777;cursor: pointer;box-shadow: inset 0 -5px 5px rgba(0,0,0,0.1),0 5px 10px rgba(0,0,0,0.1),0 10px 15px rgba(0,0,0,0.1);
}

.btns span:active,
.btns span.active{color: #ff669a;box-shadow: inset 0 -7px 5px rgba(0,0,0,0.025),inset 0 5px 10px rgba(0,0,0,0.15);
}
.btns span.playPause{width: 100px;height: 100px;
}
.btns span ion-icon{font-size: 2em;
}
.btns span.playPause ion-icon{font-size: 3em;
}

这样排版就弄好了

接下来是写js代码了:

const title = document.querySelector('.title');
const prev = document.querySelector('.prev');
const playPause = document.querySelector('.playPause');
const next = document.querySelector('.next');
const audio = document.querySelector('audio');//歌的路径和名称
const songList = [{path: 'music/ClariS - treasure.mp3',songName:'treasure'},{path: 'music/Liella! - 私のSymphony.mp3',songName:'私のSymphony'},{path: 'music/内田真礼 - ストロボメモリー.mp3',songName:'ストロボメモリー'},{path: 'music/初音ミク,ゆうゆ - 深海少女.mp3',songName:'深海少女'},
];let song_Playing = false;//播放
function playSong(){song_Playing = true;audio.play();//添加这属性，表示为选中状态playPause.classList.add('active');//这里是暂停按键playPause.innerHTML = '<ion-icon name="pause-outline"></ion-icon>';
}//暂停
function pauseSong(){song_Playing = false;audio.pause();//删除这属性playPause.classList.remove('active');playPause.innerHTML = '<ion-icon name="play-outline"></ion-icon>';
}//play or pause song on click
playPause.addEventListener('click',function(){song_Playing ? pauseSong() : playSong()});//获取歌的名称和路径
function loadSong(songList){title.textContent = songList.songName;audio.src = songList.path;
}//current song
let i = 0;//on load - select first song list
loadSong(songList[i])//上一首歌的函数和按键事件
function prevSong(){i--;if(i < 0){i = songList.length - 1;}loadSong(songList[i]);playSong();
}prev.addEventListener('click',function(){prevSong();
});//下一首歌的函数和按键事件
function nextSong(){i++;if(i > songList.length - 1){i = 0;}loadSong(songList[i]);playSong();
}next.addEventListener('click',function(){nextSong();
});

html简单的音乐播放器相关推荐

android 简单的音乐播放器实现播放模式的切换
以前写过一篇简单的音乐播放器,但是这个播放器没有实现播放模式的切换,在项目中要实现两个播放模式,循环播放和随机播放,经过这两天的努力搞定了,界面比较粗糙.可以先看一下前面的简单音乐播放器,详细的就不说 ...
android 简单的音乐播放器
在项目开发过程中需要一个简单的音频播放的功能,需求很简单,只需要能够播放一个指定文件夹的全部mp3和wav音频文件就可以,谷歌给我们提供了一套比较完整的API,使得我们可以很简单的写出一个简易的音乐播 ...
好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...
自制一个简单的音乐播放器
这两天刚学完了contentprovider和service组件,就综合下所学的,自制了一个简单的音乐播放器. 代码如下: 主activity代码 public class MainActivity ...
用Qt写一个简单的音乐播放器（三）：增加界面（播放跳转与音量控制）
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
uniapp实现简单的音乐播放器功能
uniapp实现简单的音乐播放器功能问题描述: 创建并返回内部audio上下文来控制音乐播放我是直接用scroll-into-view来实现的这个 <scroll-view scroll-y ...
Js简单实现音乐播放器
Js简单实现音乐播放器 HTML部分 CSS部分 js代码部分这段时间正好是寒假,闲来无事把大二学的web再温习了一遍,在学习到Js时,想找一些小玩意来练练手,于是我就用原生Js做了一个简单音乐播放 ...
一个基于Android开发的简单的音乐播放器
一个基于Android开发的简单的音乐播放器记得当时老师让我们写因为播放器时,脑子一头雾水,网上杂七杂八的资料也很少有用,因此索性就自己写一篇,希望对有缘人有用. 因为有好多人问我要源码,所以附上g ...
深圳java培训：使用原生JS重构简单的音乐播放器
深圳java培训:使用原生JS重构简单的音乐播放器上次,我们使用Jquery开发了一款简单的音乐播放器(如下图), 后来学生希望能够用原生的JS重构一次, 那么,下面就来看看如何使用原生的JS重构吧 ...

html简单的音乐播放器

html简单的音乐播放器相关推荐

最新文章

热门文章