<ins id="h3npf"><span id="h3npf"></span></ins>
<cite id="h3npf"><span id="h3npf"></span></cite><progress id="h3npf"></progress>
<cite id="h3npf"></cite>
<listing id="h3npf"><dl id="h3npf"><progress id="h3npf"></progress></dl></listing>
<cite id="h3npf"><video id="h3npf"></video></cite>
<cite id="h3npf"><video id="h3npf"><menuitem id="h3npf"></menuitem></video></cite>
<ins id="h3npf"></ins><var id="h3npf"><video id="h3npf"></video></var><cite id="h3npf"></cite><cite id="h3npf"></cite>

【科迅教育干货】南通web前端培训:jqyery实现的音乐播放器

来源:SOHU  [  作者:科迅教育   ]  责编:王强  |  侵权/违法举报

原标题:【科迅教育干货】南通web前端培训:jqyery实现的音乐播放器

嗨,大家好!本周科迅教育课堂又开始啦!今天小迅姐姐为大家推荐的干货是《jqyery实现的音乐播放器》。知道大家等不及了,下面就请科迅教育软件开发专业资深老师来给大家详细介绍。速来学习吧!

这期我们来分享一个h5实现的音乐播放器,这是基于jqyery完成的一个控件,如图所示:

这是网页打开时候的样子

这是鼠标点上去的样子

这是开始播放时候的样子。这款播放器是需要用到jquery来实现的

先看html代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<link rel="stylesheet" href="css/base.css">

< src="js/jquery.min.js"></>

</head>

<body>

<div id="audio" class="audio audio-off">

<audio id="audio-my" src="soures/m1.mp3" preload="metadata"></audio>

<div class="audio-head">

<div class="audio-head-tittle">

<div class="audio-head-tittle-text audio-head-tittle-text-off"></div>

</div>

<div class="audio-head-tittle-by"></div>

</div>

<div class="add"></div>

<div class="min-time"></div>

<div class="audio-img">

<canvas id="audio-img-canvas" width="200px" height="200px"></canvas>

<div class="audio-img-cover audio-img-cover-off"></div>

<canvas id="audio-img-canvas-play" class="audio-img-canvas-play-off" width="45px" height="200px"></canvas>

</div>

<div class="audio-text">歌词待更新</div>

<div class="audio-by">

<div class="audio-by-all">

<span class="audio-by-now"></span>

</div>

<div class="audio-by-text">

<span class="audio-by-text-now">00:00</span>

<span class="audio-by-text-all">00:00</span>

</div>

</div>

<div class="audio-btn">

<div class="audio-btn-list audio-btn-list-off"></div>

<div class="audio-btn-before"></div>

<div class="audio-btn-play audio-btn-play-off audio-btn-play-off-a"></div>

<div class="audio-btn-sound"></div>

<div class="audio-btn-next"></div>

</div>

<div class="audio-sound">

<div class="audio-sound-all">

<span class="audio-sound-now"></span>

<span class="audio-sound-art"></span>

</div>

</div>

</div>

<a class="audio-head-tittle-text-out"></a>

<a class="audio-head-tittle-text-out-a"></a>

< src="js/base.js" type="text/java"></>

</div>

</body>

</html>

接下来看样式部分:

*{

border: none;

margin: 0;

padding: 0;

}

ul, ol{

list-style: none;

}

a{

text-decoration: none;

}

.audio{

position: relative;

margin: auto;

top: 50px;

height: 445px;

width: 300px;

overflow: hidden;

transition: all .5s;

border-radius: 20px;

background: linear-gradient(rgba(144, 54, 124, 0.5) 0, rgba(241, 152, 156, 0.5) 445px);

}

.audio-off{

height: 50px;

width: 250px;

border-radius: 10px;

}

.audio-head{

position: absolute;

margin: auto;

width: 100%;

height: 50px;

}

.add{

position: relative;

width: 80%;

height: 50px;

}

.min-time{

position: absolute;

width: 0;

opacity: 1;

height: 4px;

margin-top: -4px;

background: rgba(244, 234, 255, 0.4);

transition: all .5s;

}

.min-time-off{

width: 0;

opacity: 0;

}

.audio-head-tittle{

height: 100%;

line-height: 50px;

color: aquamarine;

font-size: 23px;

font-weight: bold;

font-family: 微软雅黑;

text-align: center;

transition: all .5s;

}

.audio-head-tittle-text{

width: 90%;

margin-left: 5%;

text-overflow: clip;

word-break:keep-all;

white-space:nowrap;

overflow: hidden;

}

.audio-head-tittle-text-off{

width: 60%;

margin-left: 20%;

}

.audio-head-tittle-text-out{

font-size: 23px;

display: none;

}

.audio-head-tittle-text-out-a{

font-size: 20px;

display: none;

}

.audio-head-tittle-by{

margin: auto;

height: 50%;

line-height: 50px;

color: #de9fff;

font-size: 15px;

font-weight: bold;

font-family: 微软雅黑;

text-align: center;

opacity: 0;

transition: all .5s;

}

.audio-head-tittle-by-off{

opacity: 1;

}

.audio-head-tittle-off{

width: 100%;

height: 50%;

font-size: 20px;

}

.audio-img{

position: relative;

width: 100%;

height: 300px;

margin-top: -40px;

}

#audio-img-canvas{

margin: 50px 50px;

background: rgba(0, 0, 255, 0);

transition: all 1s;

}

.audio-img-canvas-on{

animation: img-cover 2.5s linear infinite .5s;

}

@keyframes img-cover {

from{transform: rotate(0)}

to{transform: rotate(360deg)}

}

.audio-img-cover{

position: absolute;

width: 90px;

height: 90px;

top: 50%;

left: 50%;

margin-top: -45px;

margin-left: -45px;

border-radius: 50%;

background: url("../image/timg.jpg") no-repeat center;

background-size: 90px 90px;

transition: all .5s;

}

.audio-img-cover-off{

position: absolute;

width: 40px;

height: 40px;

top: 50%;

left: 50%;

margin-top: -155px;

margin-left: -125px;

background-size: 40px 40px;

}

#audio-img-canvas-play{

position: absolute;

background: rgba(0, 0, 255, 0);

left: 235px;

top: 40px;

transform-origin: top;

cursor: pointer;

}

.audio-img-canvas-play-off{

transition: all .5s;

transform: rotate(10deg);

}

.audio-img-canvas-play-on{

transition: all .5s;

transform: rotate(23deg);

}

.audio-text{

display: none;

}

.audio-by{

position: relative;

margin-top: -25px;

width: 100%;

height: 50px;

}

.audio-by-all{

position: relative;

margin: auto;

width: 100%;

height: 7px;

background: rgba(255, 255, 255, 0.8);

cursor: pointer;

}

.audio-by-now{

display: block;

width: 0;

height: 100%;

transition: all .3s linear;

background: #bd428c;

}

.audio-by-text{

width: 100%;

height: 20px;

}

.audio-by-text-now, .audio-by-text-all{

display: block;

height: 20px;

line-height: 20px;

font-size: 15px;

color: white;

}

.audio-by-text-now{

float: left;

margin-left: 5%;

}

.audio-by-text-all{

float: right;

margin-right: 5%;

}

.audio-btn{

position: relative;

margin: auto;

width: 90%;

height: 100px;

margin-top: -20px;

}

.audio-btn-list{

display: inline-block;

float: left;

width: 36px;

height: 36px;

margin: 32px 4px;

cursor: pointer;

transition: all .5s;

}

.audio-btn-list-on{

background: url("../image/单曲循环.png") no-repeat center;

background-size: 36px 36px;

}

.audio-btn-list-off{

background: url("../image/循环.png") no-repeat center;

background-size: 36px 36px;

}

.audio-btn-before{

display: inline-block;

float: left;

background: url("../image/上一个,上一曲.png") no-repeat center;

width: 36px;

height: 36px;

background-size: 36px 36px;

margin: 32px 4px;

cursor: pointer;

}

.audio-btn-sound{

display: inline-block;

width: 36px;

height: 36px;

float: right;

background: url("../image/声音.png") no-repeat center;

background-size: 36px 36px;

margin: 32px 4px;

cursor: pointer;

}

.audio-btn-next{

display: inline-block;

width: 36px;

height: 36px;

float: right;

background: url("../image/下一个,下一曲.png") no-repeat center;

background-size: 36px 36px;

margin: 32px 4px;

cursor: pointer;

}

.audio-btn-play{

position: absolute;

width: 70px;

height: 70px;

top: 50%;

margin-top: -35px;

left: 50%;

margin-left: -35px;

transition: all .5s;

cursor: pointer;

}

.audio-btn-play-off{

background: url("../image/暂停.png") no-repeat center;

background-size: 70px 70px;

}

.audio-btn-play-on{

background: url("../image/播放.png") no-repeat center;

background-size: 70px 70px;

}

.audio-btn-play-off-a{

position: absolute;

width: 40px;

height: 40px;

top: 50%;

margin-top: -360px;

left: 50%;

margin-left: 85px;

cursor: pointer;

background-size: 40px 40px;

}

.audio-sound{

height: 6px;

width: 0;

margin-left: 5%;

position: relative;

opacity: 0;

overflow: hidden;

transition: all .5s;

}

.audio-sound-on{

width: 90%;

opacity: 1;

overflow: visible;

}

.audio-sound-all{

position: relative;

margin: auto;

width: 100%;

height: 6px;

background: rgba(255, 255, 255, 0.5);

border-radius: 5px;

cursor: pointer;

}

.audio-sound-now{

display: block;

height: 100%;

background: rgb(244, 234, 255);

border-radius: 5px;

}

.audio-sound-art{

display: block;

position: absolute;

margin-top: -11px;

margin-left: -8px;

width: 16px;

height: 16px;

border-radius: 50%;

background: rgb(244, 234, 255);

}

最后js部分

$(function() {

var audio = document.getElementById("audio-my");

var audioPlay = false;

var audioMax = false;

var audioName = ["m1", "m2"];

var audioIndex = 0;

var audioText = new Array();

var audioLoop = false;

var outTextValue = 0;

var audioSpeed = 1.8;

audioText = audioName[0].split("-");

$(".audio-head-tittle-text").text(audioText[1]);

$(".audio-head-tittle-text-out").text(audioText[1]);

$(".audio-head-tittle-text-out-a").text(audioText[1]);

$(".audio-head-tittle-by").text(audioText[0]);

function drawAudioArc() {

var audioCanvas = document.getElementById("audio-img-canvas");

var audioCtx = audioCanvas.getContext("2d");

audioCtx.translate(100, 100);

audioCtx.strokeStyle = "rgba(255,255,255,1)";

audioCtx.lineWidth = "6";

audioCtx.arc(0, 0, 80, 0, Math.PI * 2, true);

audioCtx.stroke();

audioCtx.beginPath();

audioCtx.lineWidth = "3";

audioCtx.arc(0, 0, 72, Math.PI / 6, Math.PI / 6 * 4, false);

audioCtx.stroke();

audioCtx.beginPath();

audioCtx.arc(0, 0, 72, Math.PI / 6 * 9, Math.PI / 6 * 6, true);

audioCtx.stroke();

audioCtx.beginPath();

audioCtx.lineWidth = "2";

audioCtx.arc(0, 0, 50, Math.PI / 6 * 9, Math.PI / 6 * 11, true);

audioCtx.stroke();

}

function drawAudioPlay() {

var audioCanvasPlay = document.getElementById("audio-img-canvas-play");

var audioCtxPlay = audioCanvasPlay.getContext("2d");

audioCtxPlay.translate(25, 10);

audioCtxPlay.lineWidth = "4";

audioCtxPlay.strokeStyle = "rgba(255,255,255,1)";

audioCtxPlay.rect(-10, 0, 20, 20);

audioCtxPlay.stroke();

audioCtxPlay.beginPath();

audioCtxPlay.rect(-10, 20, 20, 10);

audioCtxPlay.stroke();

audioCtxPlay.beginPath();

audioCtxPlay.moveTo(0, 30);

audioCtxPlay.lineTo(0, 140);

audioCtxPlay.stroke();

audioCtxPlay.beginPath();

audioCtxPlay.translate(0, 140);

audioCtxPlay.rotate(120);

audioCtxPlay.rect(0, 0, 18, 32);

audioCtxPlay.stroke();

audioCtxPlay.beginPath();

audioCtxPlay.lineWidth = "2";

audioCtxPlay.moveTo(10, 25);

audioCtxPlay.lineTo(30, 25);

audioCtxPlay.stroke();

audioCtxPlay.beginPath();

}

function playAudio() {

if(audio.paused || audio.ended) {

audioPlay = true;

audio.play();

$(".audio-btn-play").removeClass("audio-btn-play-off").addClass("audio-btn-play-on");

} else {

audioPlay = false;

$(".audio-btn-play").removeClass("audio-btn-play-on").addClass("audio-btn-play-off");

audio.pause();

}

$("#audio-img-canvas-play").toggleClass("audio-img-canvas-play-on");

$("#audio-img-canvas").toggleClass("audio-img-canvas-on");

}

function timeFormat(seconds) {

var minite = Math.floor(seconds / 60);

if(minite < 10) {

minite = "0" + minite;

}

var second = Math.floor(seconds % 60);

if(second < 10) {

second = "0" + second;

}

return minite + ":" + second;

}

function updateProgress(x) {

var progress = $(".audio-by-all");

var position = x - progress.offset().left;

var percentage = 100 * position / progress.width();

if(percentage > 100) {

percentage = 100;

}

if(percentage < 0) {

percentage = 0;

}

$(".audio-by-now").css("width", percentage + "%");

audio.currentTime = audio.duration * percentage / 100;

}

function enableProgressDrag() {

var progressDrag = false;

$(".audio-by-all").on("mousedown", function(e) {

progressDrag = true;

updateProgress(e.pageX);

});

$(document).on("mouseup", function(e) {

if(progressDrag) {

progressDrag = false;

updateProgress(e.pageX);

}

});

$(document).on("mousemove", function(e) {

if(progressDrag) {

updateProgress(e.pageX);

}

});

};

function qiehuan() {

if(audioIndex == audioName.length) {

audioIndex = 0;

}

if(audioIndex == -1) {

audioIndex = audioName.length - 1;

}

audioText = new Array();

audioText = audioName[audioIndex].split("-");

$(".audio-head-tittle-text").text(audioText[1]);

$(".audio-head-tittle-by").text(audioText[0]);

$(".audio-head-tittle-text-out").text(audioText[1]);

$(".audio-head-tittle-text-out-a").text(audioText[1]);

$(".audio-head-tittle-text").css("text-indent", 0);

audio.src = "soures/" + audioName[audioIndex] + ".mp3";

$(".audio-by-now").css("width", 0);

if(audioPlay) {

audio.play();

}

}

function enableSoundDrag() {

var volumeDrag = false;

$(".audio-sound").on("mousedown", function(e) {

volumeDrag = true;

updateVolume(e.pageX);

});

$(document).on("mouseup", function(e) {

if(volumeDrag) {

volumeDrag = false;

updateVolume(e.pageX);

}

});

$(document).on("mousemove", function(e) {

if(volumeDrag) {

updateVolume(e.pageX);

}

});

};

function updateVolume(x, vol) {

var volume = $(".audio-sound");

var soundLeft = x - volume.offset().left;

var percentage;

if(vol) {

percentage = vol * 100;

} else {

var position = soundLeft;

percentage = 100 * position / volume.width();

}

if(percentage > 100) {

percentage = 100;

}

if(percentage < 0) {

percentage = 0;

}

percentage = parseInt(percentage);

$(".audio-sound-now").css("width", percentage + "%");

$(".audio-sound-art").css("left", percentage + "%");

audio.volume = percentage / 100;

};

function audioTextOut() {

if(audioMax) {

var audioTextWidth = $(".audio-head-tittle-text-out-a").width();

var audioTittleWidth = $(".audio-head-tittle-text").width();

} else {

var audioTextWidth = $(".audio-head-tittle-text-out").width();

var audioTittleWidth = $(".audio-head-tittle-text").width();

}

if((audioTextWidth > audioTittleWidth) && !audioMax) {

if(outTextValue <= -(audioTextWidth - audioTittleWidth + 8)) {

audioSpeed = -audioSpeed;

}

if(outTextValue >= 8) {

audioSpeed = -audioSpeed;

}

outTextValue -= audioSpeed;

var outText = outTextValue + "px";

$(".audio-head-tittle-text").css("text-indent", outText);

}

if((audioTextWidth > audioTittleWidth) && audioMax) {

if(outTextValue <= -(audioTextWidth - audioTittleWidth + 20)) {

audioSpeed = -audioSpeed;

}

if(outTextValue >= 20) {

audioSpeed = -audioSpeed;

}

outTextValue -= audioSpeed;

var outText = outTextValue + "px";

$(".audio-head-tittle-text").css("text-indent", outText);

}

}

drawAudioArc();

drawAudioPlay();

updateVolume(0, 0.5);

$("#audio-my").on("loadedmetadata", function() {

$(".audio-by-text-now").text(timeFormat(0));

$(".audio-by-text-all").text(timeFormat(audio.duration));

enableProgressDrag();

enableSoundDrag();

});

$(".audio-by-text-now").text(timeFormat(0));

$(".audio-by-text-all").text(timeFormat(audio.duration));

$("#audio-my").on("timeupdate", function() {

var currentTime = audio.currentTime;

var duration = audio.duration;

var percent = 100 * currentTime / duration;

$(".audio-by-now").css("width", percent + "%");

$(".min-time").css("width", percent + "%");

$(".audio-by-text-now").text(timeFormat(currentTime));

audioTextOut();

});

$("#audio-my").on("ended", function() {

if(!audioLoop) {

audioIndex += 1;

}

qiehuan();

});

$("#audio-img-canvas-play").on("click", function() {

playAudio();

});

$(".audio-btn-play").on("click", function() {

playAudio();

});

$(".audio-btn-next").on("click", function() {

audioIndex += 1;

qiehuan();

})

$(".audio-btn-before").on("click", function() {

audioIndex -= 1;

qiehuan();

})

$(".audio-btn-sound").on("click", function() {

$(".audio-sound").toggleClass("audio-sound-on");

});

$(".audio-btn-list").on("click", function() {

if(!audioLoop) {

$(".audio-btn-list").removeClass("audio-btn-list-off").addClass("audio-btn-list-on");

} else {

$(".audio-btn-list").removeClass("audio-btn-list-on").addClass("audio-btn-list-off");

}

audioLoop = !audioLoop;

});

$("#audio").hover(function() {

$(".audio").toggleClass("audio-off");

$(".audio-img-cover").toggleClass("audio-img-cover-off");

$(".audio-btn-play").toggleClass("audio-btn-play-off-a");

$(".audio-head-tittle-by").toggleClass("audio-head-tittle-by-off");

$(".audio-head-tittle").toggleClass("audio-head-tittle-off");

$(".min-time").toggleClass("min-time-off");

$(".audio-head-tittle-text").toggleClass("audio-head-tittle-text-off");

$(".audio-btn-play").css("animation", "");

audioMax = !audioMax;

$(".audio-head-tittle-text").css("text-indent", 0);

outTextValue = 0;

audioSpeed = Math.abs(audioSpeed);

});

$("#audio").mouseleave(function() {

if(audioPlay) {

$(".audio-btn-play").css("animation", "img-cover linear 2.5s infinite");

}

$(".audio-sound").removeClass("audio-sound-on");

})

});

以上就是关于jqyery实现的音乐播放器的全部内容,大家学会了吗?感谢大家的耐心阅读,希望对南通想学软件开发的同学们有所帮助!如果您对IT学习?#20449;?#21402;的兴趣,欢迎来和我交流!

www.uvof.tw true http://www.uvof.tw/seduzx/379189/304062244.html report 38837 为您提供全方面的【科迅教育干货】南通web前端培训:jqyery实现的音乐播放器相关信息,根据用户需求提供【科迅教育干货】南通web前端培训:jqyery实现的音乐播放器最新最全信息,解决用户的【科迅教育干货】南通web前端培训:jqyery实现的音乐播放器需求,原标题:【科迅教育干货】南通web前端培训:jqyery实现的音乐播放器嗨,大家好!本周科迅教育课堂又开始啦!今天小迅姐姐为大家推荐的干货是《jqyery实现的音乐播放器》。知道大家等不及了,下面就请科迅教育软件开发专业资深老师来给大家详细介绍。速来学习吧!这...
  • 猜你?#19981;?/li>
  • 24小时热文
  • 本周热评
图文推荐
  • 最新添加
  • 最热文章
精彩推荐
读过此文的还读过
琼崖海南麻将安卓版
<ins id="h3npf"><span id="h3npf"></span></ins>
<cite id="h3npf"><span id="h3npf"></span></cite><progress id="h3npf"></progress>
<cite id="h3npf"></cite>
<listing id="h3npf"><dl id="h3npf"><progress id="h3npf"></progress></dl></listing>
<cite id="h3npf"><video id="h3npf"></video></cite>
<cite id="h3npf"><video id="h3npf"><menuitem id="h3npf"></menuitem></video></cite>
<ins id="h3npf"></ins><var id="h3npf"><video id="h3npf"></video></var><cite id="h3npf"></cite><cite id="h3npf"></cite>
<ins id="h3npf"><span id="h3npf"></span></ins>
<cite id="h3npf"><span id="h3npf"></span></cite><progress id="h3npf"></progress>
<cite id="h3npf"></cite>
<listing id="h3npf"><dl id="h3npf"><progress id="h3npf"></progress></dl></listing>
<cite id="h3npf"><video id="h3npf"></video></cite>
<cite id="h3npf"><video id="h3npf"><menuitem id="h3npf"></menuitem></video></cite>
<ins id="h3npf"></ins><var id="h3npf"><video id="h3npf"></video></var><cite id="h3npf"></cite><cite id="h3npf"></cite>
韩国快乐8官网下载不了 河北福利彩票排列7 重庆时时彩到晚上几点结束 大乐透周一走势图综合 创富心水论坛香港 湖南体彩网 打扑克 今天香港赛马会排位表 资料 竞彩篮彩2串1投注技巧 七乐彩走势图中奖查询 cba移动电源 31体育彩票走势图 藏宝图玄机论坛 2019年220期福彩开奖号 老11选5走势