Aplayer音乐播放插件

最新推荐文章于 2024-10-05 10:54:29 发布

格桑花念

最新推荐文章于 2024-10-05 10:54:29 发布

阅读量4.5k

点赞数

本文链接：https://blog.csdn.net/lyar1225/article/details/103225965

版权

APlayer中文官网

安装

使用 npm:
npm install aplayer --save

使用 Yarn:
yarn add aplayer

入门

<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg'
    }]
});

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音乐播放器插件</title>
    <link rel="stylesheet" href="css/aplayer.min.css">
    <style type="text/css">
        #main{
            width: 400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="aplayer"></div>
    </div>
<script src="js/aplayer.min.js"></script>
<script>
  var ap = new APlayer({
      element: document.getElementById('aplayer'),
      narrow: false,
      /*自动播放，默认值为false，true为开启自动播放*/
      autoplay: true,
      showlrc: true,
      /*lrc歌词显示方式,默认值为1,HTML显示方式，2为JavaScript字符串显示方式，3为lrc文件加载显示方式*/
      lrcType: 3,
      /*主题颜色*/
      theme: '#00b5ad',
      /*歌曲集合列表*/
      audio:[
          {
              /*歌名*/
              title: '爱你没差',
              /*作者*/
              author: '周杰伦',
              /*歌曲*/
              url: 'music/爱你没差-周杰伦.mp3',
              /*音乐专辑图片*/
              pic: 'images/爱你没差.jpg',
              /*歌词*/
              lrc: 'lrc/ainimeicha.lrc'
          }
      ]
  });
</script>
</body>
</html>