<!-- filepath: /hugo-site/hugo-site/layouts/shortcodes/aplayer.html -->
<!-- aplayer.html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

<div id="aplayer"></div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 获取并清除可能存在的引号，然后分割
    var names = '{{ .Get "name" }}'.replace(/['"]/g, '').split(',');
    var urls = '{{ .Get "url" }}'.replace(/['"]/g, '').split(',');
    var covers = '{{ .Get "cover" }}'.replace(/['"]/g, '').split(',');
    var artists = '{{ .Get "artist" }}'.replace(/['"]/g, '').split(',');
    
    console.log(names, urls, covers, artists);
    var ap = new APlayer({
      element: document.getElementById('aplayer'),
      narrow: false,
      autoplay: false,
      theme: '#b7daff',
      loop: 'all',
      order: 'list',
      preload: 'auto',
      audio: names.map(function(name, index) {
        return {
          name: name.trim(),
          artist: artists[index] ? artists[index].trim() : '',
          url: urls[index] ? urls[index].trim() : '',
          cover: covers[index] ? covers[index].trim() : ''
        };
      })
    });
  });
</script>

<aplayer name="大耳朵爷爷历险记片尾曲,name1,name2" url="大耳朵爷爷主题曲.mp3,source1.mp3,source2.mp3" cover="grandpa.jpg,1.jpg,2.jpg" artist="Unknown,Artist1,Artist2" >