vsPlayAudio实现一款简洁的音乐播放器效果代码
代码语言:html
所属分类:多媒体
代码描述:vsPlayAudio实现一款简洁的音乐播放器效果代码,手机端未测
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select { margin: 0; padding: 0 } html { font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; -webkit-text-size-adjust: 100%; font-size: 12px; } a { text-decoration: none; color: #000; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } em { font-style: normal } ul { font-size: 0px; } li { list-style: none; font-size: 12px; } img { border: 0; vertical-align: middle } img { max-width: 100%; max-height: 100%; display: block; } table { border-collapse: collapse; border-spacing: 0 } p { word-wrap: break-word } ::selection { background: #c1e4ff; } *:focus { outline: none; } body { font-size: 100%; color: #000; } .clear:after,.clear:before { content: ""; display: table; } .clear:after { clear: both; } .right { float: right; } .left { float: left; } .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> <link rel='stylesheet' href='//repo.bfw.wiki/bfwrepo/js/styles/dracula.min.css'> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vsPlayAudio.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/highlight.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script> <script type="text/javascript"> //ajax拦截并返回模拟数据 Mock.mock('/api/', [{ "song_id":"23243424", "name": "轻音乐", "cover": "//repo.bfw.wiki/bfwrepo/image/5d653ba895333.png", "author": "邱有句", "url": "//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3" }, { "song_id":"23243425", "name": "气势磅礴", "cover": "//repo.bfw.wiki/bfwrepo/image/5e0c6ed8b80d9.png", "author": "邱有句", "url": "//repo.bfw.wiki/bfwrepo/sound/5e148aa3821f2.mp3" }]); </script> <script> hljs.initHighlightingOnLoad(); </script> <style> #nav { text-align: center; } #nav ul li { display: inline-block; vertical-align: middle; padding: 0 15px 0 15px; border-left: 1px dotted #2bbc8a; line-height: 15px; } #nav ul li a { font-size: .8rem; color: #2bbc8a; } #nav ul .blog { border-left: 0px dotted #2bbc8a; } </style> </head> <body style="width: 500px;margin: 15px auto 0;color: #c9cacc;background-color: #1d1f21;"> <div style="text-align: center;font-size: 36px;font-weight: 700;margin: 50px 0 0 0;"> <span>vsPlayAudio</span> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0