demo.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  6. </head>
  7. <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  8. <link rel="stylesheet" href="http://118.190.145.217:8108/static/APlayer.min.css">
  9. <script src="http://118.190.145.217:8108/static/APlayer.min.js"></script>
  10. <style type="text/css">
  11. .container{
  12. width: 100%;
  13. height: 968px;
  14. background: url("http://118.190.145.217:8108/static/bg.jpg") no-repeat;
  15. background-size: 100% 100%;
  16. }
  17. #aplayer{
  18. /*position: absolute;*/
  19. top:30vh;
  20. width: 80%;
  21. margin: auto;
  22. }
  23. </style>
  24. <body style="margin: 0px;background: #C13C71;">
  25. <div class="container">
  26. <div id="aplayer">
  27. </div>
  28. </div>
  29. </body>
  30. <script type="text/javascript">
  31. var name = "{{name }}"
  32. var url = "{{url }}"
  33. const ap = new APlayer({
  34. container: document.getElementById('aplayer'),
  35. audio: [{
  36. name: name,
  37. artist: 'artist',
  38. url: url,
  39. cover: 'http://118.190.145.217:8108/static/bg.jpg'
  40. }]
  41. });
  42. </script>
  43. </html>