html-----简易版音乐播放器

html-----音乐播放器

1.功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换。
2.界面设计要求：

仿CD图像
音量调节进度条
歌曲名称显示
音乐播放器的相关按钮

2.1 仿CD图像：利用border-radius设置圆边角（这张图片必须是正方形图片不然不会是圆形的图片）

#CDimage img{border-radius:50%;
}

2.2音量调节：使用input可以调节音量

<!--音量调节进度条-->
<div>
<input type="range" min="0" max="10" step="1" />
</div>

function setVolume() {music.volume = volume.value;
}

2.3歌曲名称显示

<!--显示歌曲名称-->
<div>
当前正在播放: <span id="title">小夜曲</span>
</div>

2.4音乐播放器的相关按钮

播放/暂停按钮功能实现

<button id="toggleBtn" onclick="toggleMusic()">
<img src="data:image/play.png" width="50" height="50"/>
</button>

//音乐播放/暂停切换方法
function toggleMusic() {if (music.paused) {music.play();//播放音乐} else {music.pause();//暂停音乐}
}

3.代码如下：

<!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css">body{background-color: rgb(92, 86, 86);}div{text-align: center;margin: 10px;}#CDImage img{border-radius: 50%;}.box{width: 350px;height: 500px;margin: 10px auto;background-color: blanchedalmond;}button{background: transparent;border: 0; }</style><title>音乐播放器设计与实现</title>
</head>
<body><div class="box"><h3>简单音乐播放器</h3><hr/><audio id="audio" src="./music/月光下的云海.mp3" preload>浏览器不支持</audio><div id="CDImage"><img src="./image/sky.jpg" alt=""></div><!-- 音量调节 --><div><input id="volume" type="range" min="0" max="100" step="10" onchange="setVolume()"/></div><!-- 歌曲名字 --><div>当前正在播放：<span id="title">小夜曲</span></div><!-- 播放控制 --><div><button onclick="lastMusic()"><img src="./image/previous.png" width="50px"></button><button id="toggleBtn" onclick="toggleMusic()"><img src="./image/play.png" width="50px"></button><button onclick="nextMusic()"><img src="./image/next.png" width="50px"></button></div><script>var music = document.getElementById("audio");var volume = document.getElementById("volume ");var toggleBtn=document.getElementById("toggleBtn");var list = new Array("music/Serenade.mp3","music/EndlessHorizon.mp3","music/月光下的云海.mp3");var titleList = new Array("小夜曲","无垠地平线","月光下的海");var i=0;function setVolume(){music.volume=volume.value;}function toggleMusic(){if(music.paused){music.play();toggleBtn.innerHTML='<img src="./image/pause.png" width="50px">';}else{music.pause();toggleBtn.innerHTML='<img src="./image/play.png" width="50px">';}}function nextMusic(){if(i==list.length-1)i=0;elsei++;music.pause();music.src=list[i];title.innerHTML=titleList[i];music.play();toggleBtn.innerHTML='<img src="./image/pause.png" width="50px">';}function lastMusic(){if(i==0)i=list.length-1;elsei--;music.pause();music.src=list[i];title.innerHTML=titleList[i];music.play();toggleBtn.innerHTML='<img src="./image/pause.png" width="50px">';}</script></div>
</body>
</html>

html-----简易版音乐播放器相关推荐

HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
Python：通过网络爬虫实现一个简易控制台音乐播放器
hello,大家好,我是wangzirui32,今天我们来学习如何通过网络爬虫实现一个简易控制台音乐播放器,开始学习吧! 1. 项目结构及库准备 app.py为项目入口程序,download.py为音 ...
HTML5+JS实现简易的音乐播放器
HTML5+JS实现简易的音乐播放器播放器实现的功能播放/暂停音乐切换歌曲,上/下一首歌音量最大或静音音乐播放时间实时变化进度条拖拽歌曲图片切换播放器效果展示代码展示 html &l ...
Vue3实现简易的音乐播放器组件
前言用Vue3实现一个简易的音乐播放器组件其效果图如下所示: 实现这个组件需要提前做的准备: 引入ElementUI 引入字节跳动图标库一张唱见图片将要播放的音乐上传到文件服务器上,并提供一个 ...
使用python加PyQt5，利用QMediaPlayer写一个简易的音乐播放器（进度条拖动，音量改变，播放停止切换，歌曲列表））
当你学习了python之后,总想着利用它去做些什么,无论是制作小工具还是小游戏,都是一种锻炼. 那么,利用python加上PyQt5写一个简单的音乐播放器,可能会是一个有趣的体验. 下面我会分享一下如 ...
Android 简易的音乐播放器
Android 简易的音乐播放器效果图: 注备:由于时间问题,歌词未实现. 然后再创建一个raw的文件:如图所示然后:xml布局为: <?xml version="1.0" ...
通过html5实现简易的音乐播放器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
python如何自制音乐软件_70行python代码制作一款简易的音乐播放器！
今天整理了以前的python作业代码,发现了一些有趣的小东西,比如下面这个,大概70行代码制作一款简易的音乐播放器. install some packages pip install pygame ...
Android制作简易的音乐播放器和视频播放器
文章目录制作简易的音乐播放器和视频播放器播放多媒体文件播放音频 MediaPlayer的工作流程项目示例播放视频项目示例制作简易的音乐播放器和视频播放器播放多媒体文件 Android在 ...
Swift版音乐播放器（简化版），swift音乐播放器
这几天闲着也是闲着,学习一下Swift的,于是到开源社区Download了个OC版的音乐播放器,练练手,在这里发扬开源精神, 希望对大家有帮助! 这个DEMO里,使用到了 AudioPlayer(对音 ...

html-----简易版音乐播放器

html-----音乐播放器

html-----简易版音乐播放器相关推荐

最新文章

热门文章