原生html+js网页版简陋音乐播放器

本文属于html+js+css基础教程，今天准备撸一个简陋版的音乐播放器。主流的浏览器原本就支持影音播放功能非常强，这里是利用浏览器原本提供的音视标签audio实现个简陋的音乐播放器。由于教程不涉及到后端，浏览器又没有提供本地文件列表读取，例子里面的音乐需要通过【添加音乐】按钮添加本地音乐（音乐需和html文件是同一个目录）。

主要用到了的知识点有：css绝对定位、css背景色渐变、禁止鼠标选中内容、鼠标箭头效果、hover悬停；js方法声明和调用、onload网页加载完成事件、js创建标签、标签onchange变化事件、input标签的file类型文件选择和读取、split字符串切割、JSON字符串和对象互转、数组push、事件绑定、decodeURI网址解码、onended音频播放完成事件、localStorage本地储存、parseInt整形转换、Math.random随机数、try catch错误捕获、三元运算、typeof类型获取。

上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>音乐播放器</title>
</head>
<body><div class="music-main"><div id="music-bar"><audio id="music_box" controls autoplay src=""></audio></div><div class="func-btn" onclick="chooseMusic()">添加音乐</div><div class="func-btn" id="play_mode" onclick="changePlay()">随机播放</div><div class="music-pan"><div id="music-list"></div>    </div></div>
</body>
<style>.music-main{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: linear-gradient(to bottom right,#fbd4aa, #fbd);}#music-bar{width: 100%;position: fixed;bottom: 0;text-align: center;padding-bottom: 8vh;}.func-btn{width: 80px;text-align: center;border: 1px solid #666;border-radius: 8px;cursor: pointer;margin: 10px auto;}#music-list{height: 90vh;}.music-pan{width: 20%;position: fixed;right: 10px;z-index: 1000;overflow-y: auto;user-select: none;}li{cursor: pointer;}li:hover{color: green;}
</style>
<script>//支持的后缀var ext = ['mp3', 'wav', 'm4a', 'flac', 'ape'];//音乐列表var music_list = [];//音乐播放列表标签var mlist = document.getElementById('music-list');//初始化window.onload = function(){if(localStorage.music_list){try{var list = JSON.parse(localStorage.music_list);music_list = list;mlist.innerHTML = '';for(let m of list){showMusicList(m);}}catch(e){console.log(e);}}}//选择音乐function chooseMusic() {var file_tag = document.createElement('input');file_tag.type="file";file_tag.multiple = 'multiple';file_tag.style.display = 'none';document.body.append(file_tag);file_tag.click();//选择完音乐就把音乐添加到列表file_tag.onchange = function(e){// mlist.innerHTML = '';for(let list of file_tag.files){var name_len = list.name.split('.').length;if(ext.indexOf(list.name.split('.')[name_len-1])==-1 && ext.indexOf(list.name.split('.')[name_len-1].toLocaleUpperCase())==-1){continue ;}music_list.push(list.name);showMusicList(list.name);}localStorage.music_list = JSON.stringify(music_list);}}//展示音乐列表function showMusicList(name) {var myli = document.createElement('li');myli.innerHTML = name;mlist.appendChild(myli);//点击音乐就播放myli.onclick = function(e){document.getElementById('music_box').src = e.target.innerText;document.title = e.target.innerText;}}//下一首要播放的歌function playNext(music_name) {var next_one;for(let idx in music_list){if(music_list[idx]==music_name){next_one = music_list[idx-0+1]? music_list[idx-0+1] : music_list[0];break;}}console.log('下一首是：'+next_one);if(next_one){document.getElementById('music_box').src = next_one;document.title = next_one;}}//随机播放一首function randowPlay(){var random_idx = parseInt(Math.random()*100);if(typeof music_list[random_idx] != 'undefined'){playNext(music_list[random_idx]);return music_list[random_idx];}var max_len = music_list.length;        var result = parseInt(random_idx%max_len);playNext(music_list[result]);}//更改播放模式function changePlay() {var modeBtn = document.getElementById('play_mode');localStorage.play_mode = localStorage.play_mode? localStorage.play_mode : 0;localStorage.play_mode = localStorage.play_mode==0? 1 : 0;if(localStorage.play_mode==1){modeBtn.innerHTML = '顺序播放';// playNext('');}else{modeBtn.innerHTML = '随机播放';// randowPlay();}}//播放结束事件document.getElementById('music_box').onended = function(e){//随机播放if(1==localStorage.play_mode){randowPlay();return false;}var len = e.target.src.split('/').length;playNext(decodeURI(e.target.src.split('/')[len-1]));}
</script>
</html>

原生html+js网页版简陋音乐播放器相关推荐

用jq和bootstrap3 实现一个自定义网页版的音乐播放器
用jq和bootstrap3 实现一个自定义网页版的音乐播放器 1.主要实现功能 1.1.点击播放与暂停,上一首和下一首: 注:用python返回所有歌曲的信息,加载完成默认选择第一首歌曲,通过传递歌 ...
深圳java培训：使用原生JS重构简单的音乐播放器
深圳java培训:使用原生JS重构简单的音乐播放器上次,我们使用Jquery开发了一款简单的音乐播放器(如下图), 后来学生希望能够用原生的JS重构一次, 那么,下面就来看看如何使用原生的JS重构吧 ...
好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...
vue写js代码_vue.js弹出式音乐播放器特效代码
码农那点事儿关注我们,一起学习进步 vue弹出式音乐播放器是一款基于vue.js实现的点击弹出式音乐播放器代码特效,点击图片即可弹出播放界面大图,可切换列表模式,上一首下一首音乐切换等功能. 下载源 ...
网页实现一个音乐播放器
怎样在网页实现一个音乐播放器(js html css)(网页实现音乐播放) 标题求大佬帮着写一个页面实现音乐播放
3分钟开发一个冰冰版 3D 音乐播放器，是什么样的体验
: 一个对开发技术特别执着的程序员,对移动开发有着独到的见解和深入的研究,有着多年的iOS.Android.HTML5开发经验,对NativeApp.HybridApp.WebApp开发有着独到的见解 ...
HTML5+JS实现简易的音乐播放器
HTML5+JS实现简易的音乐播放器播放器实现的功能播放/暂停音乐切换歌曲,上/下一首歌音量最大或静音音乐播放时间实时变化进度条拖拽歌曲图片切换播放器效果展示代码展示 html &l ...
html中插入音乐播放器,网页中插入音乐播放器WMA 方法有两种：object和embed
网页中插入音乐播放器(详细,全面,加图) 通常有三种方法,使用普通的html方法有两种:object和embed.另一种是用flash编写的播放器,这种方法兼容性级好,但难度较大,较复杂. 其中obj ...
python开发音乐播放器教程_python开发简易版在线音乐播放器示例代码
在线音乐播放器,使用python的Tkinter库做了一个界面,感觉这个库使用起来还是挺方便的,音乐的数据来自网易云音乐的一个接口,通过urllib.urlopen模块打开网址,使用Json模块进行数 ...

原生html+js网页版简陋音乐播放器

原生html+js网页版简陋音乐播放器相关推荐

最新文章

热门文章