HTML5音乐播放器 - 《爱的暴风雨 - 朱克》

风中飞尘 · 发表于 2021-3-27 09:55

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由风中飞尘于 2023-6-6 22:35 编辑

资源流逝

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">

<title>帖子音乐演示 - 帖子音乐 - 技能趴 - Powered by Discuz!</title>
<meta name="keywords" content="帖子音乐演示">
<meta name="description" content=" 帖子音乐演示 ,技能趴">
<meta name="generator" content="Discuz! X3.4">
<meta name="author" content="Discuz! Team and Comsenz UI Team">
<meta name="copyright" content="2001-2020 Tencent Cloud.">
<meta name="MSSmartTagsPreventParsing" content="True">
<meta http-equiv="MSThemeCompatible" content="Yes">
<style type="text/css">

.audioc{
margin: 5px;
padding: 5px;
width: 750px;
}

.diepian{
height: 205px;
width: 229px;
float: left;
background-image: url(aq/dp.png);
background-repeat: no-repeat;
}
.dpin img{
border-radius: 50%;
width: 135px;
height: 135px;
margin-top: 34px;
margin-left: 34px;
}

.middlec{
float: left;
width: 380px;
}

.middled{
float: left;
width: 480px;
}
.pannel{
background: url(source/plugin/jnpar_bmusic/imgs/wave.png) no-repeat bottom right;
margin-left: 5px;
width: 380px;
margin-top: 20px;
}
.right{
width: 120px;
float: right;
}
.blank{
width: 100px;
height: 60px;
}
.btn_w{
width: 100px;
margin: 10px;
border-radius: 5px;
border: 1px red solid;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 14px;
background: url(source/plugin/jnpar_bmusic/imgs/heart.png) no-repeat 9px 7px;
padding-left: 15px;
}

.btn_w a{
text-decoration: none;
}

.progress {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-left: 5px;
margin-top: -25px;
}

.progress-bar {
position: relative;
width: 100%;
height: 41px;
background-color: #d8d8d8;
vertical-align: 2px;
border-radius: 3px;
cursor: pointer;
padding-left: 15px;
}

.now {
position: absolute;
left: 0;
display: inline-block;
height: 41px;
width: 70%;
background: #f43584;
}

.now::after {
content: '';
position: absolute;
left: 96%;
width: 37px;
height: 37px;
top: 13px;
background-image: url(aq/handle.png);
background-repeat: no-repeat;
}
.songname{
font-size: 25px;
color: #2f2f2f;
padding-top: 10px;
font-weight: bold;
line-height: 30px;
height: 30px;
overflow: hidden;
}
.songer{
font-size: 16px;
color: #787878;
}
.songer span {
color: #f43584;
}
</style>
<body>

<div class="cl audioc">
<div class="diepian cl"><div style="float:right;padding-top: 10px;"><img src="aq/discreader.png"></div><div class="dpin"><img id="dpin" src="aq/qyzj-1579418434-7680.JPG"></div></div>
<div class="middlec">
<div class="pannel">
<div class="songname">测试歌曲</div>
<div class="songer">歌手：<span>未知</span></div>
</div>
<div style="float: left; margin-top: 46px; margin-left: -40px;"><img src="aq/play.png" id="playpause" style=" width:58px; height: 58px;"></div>
<div style="float: left; width: 359px; margin-top:74px;"><div class="progress">
<div class="progress-bar" id="progress-bar">
<div class="now" id="now" style="width: 42.183%;"><img src="aq/wave.png"></div>
</div>
</div></div>
<div style="width: 380px;margin-top: 5px;" class="cl"><span class="end" id="end" style="float: right;">03:55</span><span class="start" id="start">01:39</span></div>
</div>

</div>
<audio id="myAudio" src="https://mp3.wf/a_vidio/1.mp3">您的浏览器不支持audio标签</audio>

<script>

function changebg(n){
var div1=document.getElementById('collect_btn');
if(n==1){
div1.style.background='url(source/plugin/jnpar_bmusic/imgs/heart.png) no-repeat 9px 7px';
}else{
div1.style.background='url(source/plugin/jnpar_bmusic/imgs/hearted.png) no-repeat 9px 7px';
}

}

</script>
<script src="aq/bottomjs.js" type="text/javascript"></script>

</body>
</html>