作者：浪子花梦，一个有趣的程序员 ~
HTML、CSS、JS 方面的内容也学了许多，我也写了相关的文章在博客之中，需要学习两个小项目巩固一下知识所学的知识，在此作一个分享，资料源于B站，链接如下所示：

Html+Css+JavaScript 打造个性音乐播放器（教程）

效果如下所示：

不会在 CSDN上面放视频，只会弄个 gif . . .

HTML 代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>音乐播放器</title><link rel="stylesheet" type="text/css" href="index.css">
</head>
<body><textarea name="" id="txt" cols="30" rows="10" style="display: none;">[00:00.00]Lemon - 米津玄師 (よねづ けんし)[00:05.20]词：米津玄師[00:10.30]曲：米津玄師[00:25.60]夢ならば[00:26.50]どれほどよかったでしょう[00:30.96]未だにあなたのことを夢にみる[00:35.14]忘れた物を取りに帰るように[00:41.68]古びた思い出の埃を払う[00:49.13]戻らない幸せがあることを[00:55.43]最後にあなたが教えてくれた[01:00.93]言えずに隠してた昏い過去も[01:06.53]あなたがいなきゃ[01:08.91]永遠に昏いまま[01:12.67]きっともうこれ以上[01:15.15]傷つくことなど[01:17.80]ありはしないとわかっている[01:22.54]あの日の悲しみさえ[01:25.28]あの日の苦しみさえ[01:28.11]そのすべてを愛してた[01:31.04]あなたとともに[01:33.64]胸に残り離れない[01:36.59]苦いレモンの匂い[01:39.65]雨が降り止むまでは帰れない[01:45.30]今でもあなたはわたしの光[02:01.93]暗闇であなたの背をなぞった[02:07.16]その輪郭を鮮明に覚えている[02:12.78]受け止めきれないものと[02:15.81]出会うたび[02:18.24]溢れてやまないのは涙だけ[02:24.37]何をしていたの[02:26.81]何を見ていたの[02:29.58]わたしの知らない横顔で[02:34.66]どこかであなたが今[02:37.12]わたしと同じ様な[02:40.92]涙にくれ[02:41.31]淋しさの中にいるなら[02:45.41]わたしのことなどどうか[02:48.67]忘れてください[02:51.48]そんなことを心から願うほどに[02:56.17]今でもあなたはわたしの光[03:05.76]自分が思うより[03:11.96]恋をしていたあなたに[03:16.37]あれから思うように[03:22.00]息ができない[03:27.58]あんなに側にいたのに[03:33.97]まるで嘘みたい[03:38.18]とても忘れられない[03:44.80]それだけが確か[03:54.69]あの日の悲しみさえ[03:57.16]あの日の苦しみさえ[04:00.87]そのすべてを愛してた[04:03.67]あなたとともに[04:05.27]胸に残り離れない[04:08.41]苦いレモンの匂い[04:11.29]雨が降り止むまでは帰れない[04:17.83]切り分けた果実の片方の様に[04:22.39]今でもあなたはわたしの光</textarea><div class="photo"><div class="title">Lemon</div><div class="singer">米津玄師</div><div class="play"></div><div class="lrc"><div class="content"></div></div></div><audio id="myMusic" src="./mp3/Lemon.mp3" autoplay>您的浏览器不支持播放音频文件！！！</audio><script src="./index.js"></script>
</body>
</html>

CSS 代码如下所示：

*{margin: 0px;padding: 0px;
}body{background-color: black;
}.photo{width: 320px;height: 630px;background:linear-gradient(180deg,#ead6ee,#a0f1ea);margin: 50px auto;font-family: Georgia, 'Times New Roman', Times, serif;color: darkcyan;border-radius: 5px;box-shadow: 0 0 15px #ead5ee;overflow: hidden;
}.title{margin-top: 5px;width: 100%;height: 70px;font-size: 32px;text-align: center;line-height: 70px;
}.singer{width: 100%;height: 40px;font-size: 18px;text-align: center;line-height: 30px;
}.play{width: 182px;height: 193px;background-image: url("./img/music.png");background-repeat: no-repeat;margin: 20px auto;
}.lrc{width: 100%;height: 220px;margin: 40px auto;text-align: center;overflow: hidden;
}.lrc p{line-height: 20px;font-size: 15px;
}.content{position: relative;
}.play.rotate{animation: rot 5s linear infinite;
}@keyframes rot{from{transform: rotate(0deg);}to{transform: rotate(360deg);}
}

JavaScript 代码如下所示：


// 提取控制图片的权限
var btn = document.getElementsByClassName("play")[0];// 提取控制音乐的权限
var myMusic = document.getElementById("myMusic");// 提取控制歌词的权限
var txt = document.getElementById("txt");// 提取控制歌词地方的权限
var con = document.getElementsByClassName("content")[0];// 标记音乐是否播放
var mark = true;// 当音乐图片被点击时的事件处理器
btn.onclick = function(){if(mark){this.className += " rotate";myMusic.play();mark = false;}else{this.className = "play";myMusic.pause();mark = true;}
}var lrc = txt.value;
var lrcArr = lrc.split("[");
var html = ""       // 存放标签 p所代表的歌词
for(var i = 0; i < lrcArr.length; ++i){var arr = lrcArr[i].split("]");var time = arr[0].split(".");var timer = time[0].split(":");var ms = timer[0] * 60 + timer[1] * 1;  // 以当前时间作 idvar text = arr[1];                      // 歌词部分if(text){html += "<p id = " + ms + ">" + text + "</p>";}con.innerHTML = html;
}
console.log("huameng");
var num = 0;
var oP = con.getElementsByTagName("p");     // 获取所有标签的内容
// 添加音乐的时间更新事件的事件处理器
myMusic.addEventListener("timeupdate", function(){var curTime = parseInt(this.currentTime);if(document.getElementById(curTime)){for(var i = 0; i < oP.length; ++i){oP[i].style.cssText = "font-size: 15px;";}document.getElementById(curTime).style.cssText = "background: linear-gradient(-3deg,#eebd89 0%,#d13abd 100%); -webkit-background-clip: text; color:transparent;font-size: 20px";if(oP[7 + num].id == curTime){con.style.top = -20 * num + "px";++num;}}
});

上面的代码复制可直接使用，加个mp3、png文件就行了 . . .

音乐播放器制作 (HTML + CSS + JavaScript）相关推荐

音乐播放器制作一（Windows Media Player控件）
VS2013 MFC做音乐播放器,需要使用到ActiveX控件(Windows Media Player),可以播放音视频,支持歌单添加,删除,保存操作,支持循环,顺序,随机播放. 话不多说,先来 ...
Android 音乐播放器制作(带有通知栏、Widget小挂件)
Android 音乐播放器制作(带有通知栏显示.Widget小挂件) 我用的开发工具是AndroidStudio,我的手机是Android7.1.2,我的另一个测试手机是Android8.0. 整个项 ...
flash音乐播放器制作教程
flash音乐播放器制作教程 2011年09月24日 [b]请下载最新CMP v2.1正式版:[/b] [b]http://linsu.sz17399.com/cmp21/cmp21.rar[/b] ...
基于Qt的音乐播放器制作
基于Qt的音乐播放器制作使用浏览器自带工具抓包歌曲资源开发人员工具抓包点击浏览器右上角的 "-" 快捷键(Alt + F): 点击其中的"更多工具" ➡ ...
Android音乐播放器制作（二）点击歌曲实现播放
上次我们实现了把手机里的音频扫描到,然后放在list集合里面,用ListView展示在手机界面上,如果没有看过的可以去看看本人的博客:Android音乐播放器制作(一)扫描本地音乐显示在手机上这次是 ...
python 本地音乐播放器制作过程
制作这个播放器的目的是为了将下载下来的mp3文件进行随机或是顺序的播放.选择需要播放的音乐的路径,选择播放方式,经过测试可以完美的播放本地音乐. [阅读全文] 在开始之前介绍一个免费下载mp3音乐的网 ...
android做一个音乐播放器,制作一个简单的Android版的音乐播放器
音乐播放器是一个非常常见的应用,这篇博客就是介绍如何制作一个简单的音乐播放器,这款音乐播放器具有以下的功能:播放歌曲.暂停播放歌曲..显示歌曲的总时长.显示歌曲的当前播放时长.调节滑块可以将歌曲调节到 ...
PHP制作音乐播放器制作教案,js制作简单的音乐播放器的示例代码
一.设计目的: 1.随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音乐,于是突发奇想,制作一个音乐播放器. 2.主要功能: 1 支持循环自动播 ...
GEC6818音乐播放器制作
环境 # linux操作系统 uname -a Linux incipe-virtual-machine 5.4.0-31-generic #35-Ubuntu SMP Thu May 7 20:20 ...

音乐播放器制作 (HTML + CSS + JavaScript）

HTML 代码如下所示：

CSS 代码如下所示：

JavaScript 代码如下所示：

音乐播放器制作 (HTML + CSS + JavaScript）相关推荐

最新文章

热门文章