如何设计一个网页版音乐播放器

样式预览:

主要功能:

音乐开始播放、暂停
音乐文件总时长、当前播放时长
进度的显示与调节
音量的显示与调节
音乐结束的判断

主要代码块（Js）：

进度条：（进度的调节及显示）

 var music = document.getElementById("music");var btn = document.getElementById("play_pause_btn");var current_time = document.getElementById("music_time");var music_progress =   document.getElementById("music_progress");var voice_progress = document.getElementById("voice");music.volume = 0.5;
//计时function showTime() {//返回音乐时长var music_time = music.duration;var now_time = music.currentTime;var minutes = parseInt(music_time / 60);var seconds = parseInt(music_time - minutes * 60);minutes = minutes < 10 ? '0' + minutes : minutes;seconds = seconds < 10 ? '0' + seconds : seconds;//返回播放时长var seconds_now = parseInt(now_time % 60);var minutes_now = parseInt(now_time / 60);seconds_now = seconds_now < 10 ? '0' + seconds_now : seconds_now;minutes_now = minutes_now < 10 ? '0' + minutes_now : minutes_now;//显示到文本中current_time.innerHTML = minutes_now + ":" + seconds_now + "/" + minutes + ":" + seconds;//显示到音乐进度条中var plan = parseFloat(now_time / music_time);var value1 = parseInt(plan * 100);music_progress.value=value1;if (music.ended) {console.log("end");music.currentTime = 0;btn.style.transform = "rotate(0deg)";clearInterval(timer2);}}

2.播放按钮：（音乐的播放与暂停）

var deg = 0;var timer2;//按钮开关btn.onclick = function() {if (music.paused) {music.play();timer2 = setInterval(function() {if (deg == 360) { deg = 0; }deg += 5;console.log(deg);btn.style.transform = "rotate(" + deg + "deg)"}, 100);} else {music.pause();clearInterval(timer2);btn.style.transform = "rotate(" + deg + "deg)"}}

3.音量调节：（音量的大小调节及显示）

//音量调节  :music_progress.onclick = function(event) {var e = event ? event : window.event;console.log(e.pageX);var start = 100;music.currentTime = (e.pageX - start) * music.duration / 400;}voice_progress.onclick = function(eevet) {var e = event ? event : window.event;var start = 600;music.volume = (e.pageX - start) / 200;this.value = music.volume * 100;var voice_tb = document.getElementById("voice_tb");voice_tb.innerHTML = "音量：" + this.value + "%";}//定时器  : 设置时间 / 结束停止计时 / 重新开始var timer = setInterval(function() {showTime();}, 10);

以下是完整的HTML代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>网页多媒体</title><style>/*        整体框架     */div#controller {width: 800px;height: 80px;position: relative;font-family: "segoe script";background-image: url(bg.png);border-radius: 5px;}/*          点击暂停开始    */a#play_pause_btn {width: 64px;height: 64px;position: absolute;left: 10px;top: 8px;display: inline-block;}a#play_pause_btn img {border-radius: 50%;width: 100%;height: 100%;}/*      显示时间    */span#music_time {position: absolute;right: 310px;top: 10px;}span#music_name {position: absolute;left: 90px;top: 10px;}/*      音乐进度   */progress#music_progress {width: 400px;height: 3px;-webkit-appearance: none;position: absolute;left: 90px;top: 50px;}progress#music_progress::-webkit-progress-bar {background-color: white;border-radius: 5px;}progress#music_progress::-webkit-progress-value {background-color: #3f55a7;border-radius: 5px;}/*       音量调节大小  */progress#voice {width: 200px;height: 5px;-webkit-appearance: none;position: absolute;right: 10px;top: 45px;}progress#voice::-webkit-progress-bar {background-color: white;border-radius: 5px;}progress#voice::-webkit-progress-value {background-color:#e72568;border-radius: 5px;}/*  音量按钮*/span#voice_tb {position: absolute;right: 220px;top: 40%;}</style><script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script><script>window.onload = function() {var music = document.getElementById("music");var btn = document.getElementById("play_pause_btn");var current_time = document.getElementById("music_time");var music_progress = document.getElementById("music_progress");var voice_progress = document.getElementById("voice");music.volume = 0.5;//计时function showTime() {//返回音乐时长var music_time = music.duration;var now_time = music.currentTime;var minutes = parseInt(music_time / 60);var seconds = parseInt(music_time - minutes * 60);minutes = minutes < 10 ? '0' + minutes : minutes;seconds = seconds < 10 ? '0' + seconds : seconds;//返回播放时长var seconds_now = parseInt(now_time % 60);var minutes_now = parseInt(now_time / 60);seconds_now = seconds_now < 10 ? '0' + seconds_now : seconds_now;minutes_now = minutes_now < 10 ? '0' + minutes_now : minutes_now;//显示到文本中current_time.innerHTML = minutes_now + ":" + seconds_now + "/" + minutes + ":" + seconds;//显示到音乐进度条中var plan = parseFloat(now_time / music_time);var value1 = parseInt(plan * 100);music_progress.value=value1;if (music.ended) {console.log("end");music.currentTime = 0;btn.style.transform = "rotate(0deg)";clearInterval(timer2);}}var deg = 0;var timer2;//按钮开关btn.onclick = function() {if (music.paused) {music.play();timer2 = setInterval(function() {if (deg == 360) { deg = 0; }deg += 5;console.log(deg);btn.style.transform = "rotate(" + deg + "deg)"}, 100);} else {music.pause();clearInterval(timer2);btn.style.transform = "rotate(" + deg + "deg)"}}//音量调节  :music_progress.onclick = function(event) {var e = event ? event : window.event;console.log(e.pageX);var start = 100;music.currentTime = (e.pageX - start) * music.duration / 400;}voice_progress.onclick = function(eevet) {var e = event ? event : window.event;var start = 600;music.volume = (e.pageX - start) / 200;this.value = music.volume * 100;var voice_tb = document.getElementById("voice_tb");voice_tb.innerHTML = "音量：" + this.value + "%";}//定时器  : 设置时间 / 结束停止计时 / 重新开始var timer = setInterval(function() {showTime();}, 10);}</script>
</head><body><audio src="Beauty.mp3" id="music"></audio><div id="controller"><div id="paly"><a href="javascript:;" id="play_pause_btn"><img src="tp.jpg" alt=""></a></div><div id="meg"><span id="music_name">Beauty-Wold-Colony</span><span id="music_time"></span></div><div id="progresscontrol"><progress id="music_progress" value="0" max="100"></progress><span id="voice_tb">音量:50%</span><progress id="voice" value="50" max="100"></progress></div></div>
</body></html>

如何设计一个网页版音乐播放器相关推荐

仿网易云网页版音乐播放器，实现歌词随歌曲进行滚动高亮
引言前几天在使用网易云网页版听歌时,看着那个页面的歌词随歌曲进行高亮,突然也想自己手动地去实现一下,于是呢,就仿照了网易云音乐的网页自己也写了个页面.效果图如下: 当然了,此处不做css的样式介绍, ...
网页版音乐播放器下载音乐教程
一 .咳咳 , 每天一个白嫖小技巧,它来了它来了!!! 打开W_yi音乐,输入想要get的音乐: 按下F12会出现以下也页面,依次点击图中编标记的两处地方: 出现以上页面以后就点击播放了,等播放一遍 ...
音乐播放器项目：使用网易云音乐api开发网页版音乐播放器开发难题（一）
将子组件中获取到后台的url参数传递给父组件解决方法: axios({//获取urlurl:'http://localhost:3000/song/url',method:'get',params: ...
完整打造一个多功能音乐播放器项目（初步设想跟酷狗类似）
本人目前准备利用闲暇时间打造一个完整的音乐播放器项目,主要用于学习及分享!原创不易,转载请注明出处. 这是一个什么样的音乐播放器呢?整体的架构跟酷狗差不多吧,我的方式呢,是一个个组件一个个模块先做好, ...
html中加入音乐播放器,HTML网页添加音乐播放器做背景音乐代码-标签audio
是 HTML 5 的一个新标签,定义声音,比如音乐或其他音频流. 调用格式: src="http://sc1.111ttt.com/2016/1/02/04/195040016323.mp3 ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
用js创建audio对象实现网页迷你音乐播放器
主要是靠咋没的audio对象,我就不多说废话了,也不会说,直接上代码: HTML <!DOCTYPE html> <html><head><meta http ...
用Qt写一个简单的音乐播放器（三）：增加界面（播放跳转与音量控制）
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
用Qt写一个简单的音乐播放器（七）：界面美化（QSS样式表）
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
自制一个简单的音乐播放器
这两天刚学完了contentprovider和service组件,就综合下所学的,自制了一个简单的音乐播放器. 代码如下: 主activity代码 public class MainActivity ...

如何设计一个网页版音乐播放器

样式预览:

主要功能:

主要代码块（Js）：

如何设计一个网页版音乐播放器相关推荐

最新文章

热门文章