Hexo博客Next主题魔改教程系列-音乐播放器

之前写过给博客添加音乐播放器,主要使用的是Hexo-tag-aplayer同时使用Meting-js。
但最近发现貌似Meting-js出现了一些问题,主要是访问跨域的问题.

所以为了网站正常显示播放器,同时也为了操作方便,我这里又使用了firame

同时在meting-js里增加判断,如果报错就显示这个iframe元素,所以就不使用cdn引入了.

下载meting-js文件并引入.

修改一下

class MetingJSElement extends HTMLElement {

  connectedCallback() {
    if (window.APlayer && window.fetch) {
      this._init()
      this._parse()
    }
  }

  disconnectedCallback() {
    if (!this.lock) {
      this.aplayer.destroy()
    }
  }

  _camelize(str) {
    return str
      .replace(/^[_.- ]+/, '')
      .toLowerCase()
      .replace(/[_.- ]+(w|$)/g, (m, p1) => p1.toUpperCase())
  }

  _init() {
    let config = {}
    for (let i = 0; i  res.json())
      .then(result => this._loadPlayer(result))
      .catch(error => {
        addAnotherPlayer(this)
        console.error('There has been a problem with your fetch operation:', error);
  });
  }

  _loadPlayer(data) {

    let defaultOption = {
      audio: data,
      mutex: true,
      lrcType: this.meta.lrcType || 3,
      storageName: 'metingjs'
    }

    if (!data.length) return

    let options = {
      ...defaultOption,
      ...this.config,
    }
    for (let optkey in options) {
      if (options[optkey] === 'true' || options[optkey] === 'false') {
        options[optkey] = (options[optkey] === 'true')
      }
    }

    let div = document.createElement('div')
    options.container = div
    this.appendChild(div)

    this.aplayer = new APlayer(options)
  }

}

console.log('n %c MetingJS v2.0.1 %c https://github.com/metowolf/MetingJS n', 'color: #fadfa3; background: #030307; padding:5px 0;', 'background: #fadfa3; padding:5px 0;')
function addAnotherPlayer (currentDiv) {
  // 创建一个新的 div 元素
  let newDiv = document.createElement("iframe");
  // 给它一些内容
  newDiv.setAttribute("frameborder","no")
   newDiv.setAttribute("border","0")
   newDiv.setAttribute("marginwidth","0")
 newDiv.setAttribute("marginheight","0")
  newDiv.setAttribute("width",330)
   newDiv.setAttribute("height",110)
    newDiv.setAttribute("src","//music.163.com/outchain/player?type=0&id=6856787487&auto=0&height=90")
  // 将这个新的元素和它的文本添加到 DOM 中
 // let currentDiv = document.getElementsByTagName("meting-js")[0];
  currentDiv.insertAdjacentElement('afterend',newDiv)
}
if (window.customElements && !window.customElements.get('meting-js')) {
  window.MetingJSElement = MetingJSElement
  window.customElements.define('meting-js', MetingJSElement)
}

这样在fetch之后报错的话就增加iframe元素,就正常显示一个播放器了.

本文由mdnice多平台发布

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 单链表知识点

单链表 1.顺序表 优点：物理空间连续，支持随机访问 缺点：空间不够就需要扩容，花费时间和空间；插入删除效率低下 2.单链表 优点：按需申请释放空间；插入删除常数时间 缺点：不支持随机访问 3.注意点 (1)在修改指针本身的内容时，也就是改变指针本身存储的地址…