document.addEventListener('WeixinOpenTagsError', function (e) {
  console.error(e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响
});

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

wx.ready(function () {
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});

wx.error(function (res) {
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
});

// <wx-open-audio id="audio"></wx-open-audio>
const audio = document.getElementById('audio');
console.log(audio.src);
console.log(audio.title);
console.log(audio.episode);
console.log(audio.singer);
console.log(audio.cover);
console.log(audio.error);
console.log(audio.ended);
console.log(audio.paused);
console.log(audio.duration);
console.log(audio.readyState);
console.log(audio.currentTime);
console.log(audio.playbackRate);
audio.src = 'http://xxx.xxx.com/.mp3'
audio.title = '别找我麻烦'
audio.episode = '说到爱'
audio.singer = '蔡健雅'
audio.cover = 'http://xxx.xxx.com/xxx.jpg'
audio.currentTime = 100;
audio.playbackRate = 1.0；

// <wx-open-audio id="audio"></wx-open-audio>
const audio = document.getElementById('audio');
audio.load();
audio.play();
audio.pause();

// <wx-open-audio id="audio"></wx-open-audio>
const audio = document.getElementById('audio');
audio.addEventListener('ready', function (event) {
  // 标签初始化完成
});

// <wx-open-audio id="audio"></wx-open-audio>
const audio = document.getElementById('audio');
audio.addEventListener('durationchange', function (event) {
  // 获取到音频长度
  const state = event.detail;
  console.log(state.duration);
});
audio.addEventListener('loadedmetadata', function (event) {
  // 音频meta信息只有长度，因此loadedmetadata会接着马上触发
  const state = event.detail;
  console.log(state.duration);
});

// <wx-open-audio id="audio"></wx-open-audio>
const audio = document.getElementById('audio');
audio.addEventListener('canplay', function (event) {
  // 可随时播放
  const state = event.detail;
  console.log(state.duration);
});

// <wx-open-audio id="audio"></wx-open-audio>
const audio = document.getElementById('audio');
audio.addEventListener('play', function (event) {
  // 开始播放
});

// <wx-open-audio id="audio"></wx-open-audio>
const audio = document.getElementById('audio');
audio.addEventListener('pause', function (event) {
  // 停止播放
});

// <wx-open-audio id="audio"></wx-open-audio>
const audio = document.getElementById('audio');
audio.addEventListener('timeupdate', function (event) {
  const state = event.detail;
  console.log(state.src);         // 当前音频来源
  console.log(state.title);       // 当前音频标题
  console.log(state.episode);     // 当前专辑名称
  console.log(state.singer);      // 当前歌手名称
  console.log(state.cover);       // 当前专辑封面
  console.log(state.playState);   // 播放状态，'playing' | 'pause' | 'seeked'
  console.log(state.paused);      // 是否暂停
  console.log(state.buffered);    // 已缓冲位置，单位秒
  console.log(state.currentTime); // 当前播放位置，单位秒
});

// <wx-open-audio id="audio"></wx-open-audio>
const audio = document.getElementById('audio');
audio.addEventListener('seeked', function (event) {
  // 播放位置变更完成
  const state = event.detail;
  console.log(state.currentTime); // 变更后播放位置，单位秒
});

// <wx-open-audio id="audio"></wx-open-audio>
const audio = document.getElementById('audio');
audio.addEventListener('ratechange', function (event) {
  // 播放位置变更完成
  const state = event.detail;
  console.log(state.playbackRate); // 变更后播放速率
});

// <wx-open-audio id="audio"></wx-open-audio>
const audio = document.getElementById('audio');
audio.addEventListener('ended', function (event) {
  // 播放结束
});

// <wx-open-audio id="audio"></wx-open-audio>
const audio = document.getElementById('audio');
audio.addEventListener('error', function (event) {
  // 发生错误
  const error = event.detail;
  console.log(error.errMsg);
  // 1. play:fail（调用play方法失败）
  // 2. pause:fail（调用pause方法失败）
  // 3. seek:fail（设置currentTime失败）
  // 4. ratechange:fail（设置playbackRate失败）
});

function Audio() {
  const audio = useRef(null);
  useEffect(() => {
    const canplay = () => {};
    const pause = () => {};
    const seeked = () => {};
    audio.current.addEventListener('canplay', canplay);
    audio.current.addEventListener('pause', pause);
    audio.current.addEventListener('seeked', seeked);
    return () => {
      audio.current.removeEventListener('canplay', canplay);
      audio.current.removeEventListener('pause', pause);
      audio.current.removeEventListener('seeked', seeked);
    };
  }, []);
  return (
    <wx-open-audio
      ref={audio}
      title="别找我麻烦"
      src="http://xxx.xxx.com/.mp3"
    >
      <script type="text/wxtag-template">
        <button>播放</button>
      </script>
    </wx-open-audio>
  );
}