Anki：制作音乐播放控件

代码备份

{{FrontSide}}

<hr id=answer>
<div id="music"></div>
<div id="txt"></div>

<script>
function addStylesheet(src, callback) {
    var s = document.createElement('link');
    s.rel = 'stylesheet';
    s.href = src;
    s.onload = callback;
    document.head.appendChild(s);
}

function addScript(src, callback) {
    var s = document.createElement('script');
    s.src = src;
    s.type = "text/javascript";
    s.onload = callback;
    document.body.appendChild(s);
}

function replaceAllWhitespaceWithSpace(str) {
    return str.replace(/[\t\v\f \u00a0\u2000-\u200b\u2028-\u2029\u3000]/g, ' ');
}

String.prototype.replaceAll = function (FindText, RepText) {
    let regExp = new RegExp(FindText,'g');
    return this.replace(regExp, RepText);
};

var playerCSSUrl = "_meplayer.css";
addStylesheet(playerCSSUrl, function () {
});

var playerUrl = "_meplayer.js";
addScript(playerUrl, function () {
    mePlayer({
        music: {
            title: '{{歌名}}',
            author: '{{歌手}}',
            // cover : '封面路径',
            src: '{{音乐路径}}',
            lrc: '{{歌词（LRC格式）}}'
        },
        target: '#music',
        autoplay: false // 是否自动播放
    });
    var txt = document.getElementById(`txt`)
    var temp = '{{歌词（LRC格式）}}';
    temp = temp.replaceAll(/\[.*\]/,"");
    txt.innerText =  '{{歌词（LRC格式）}}'.replaceAll(/\[.*\]/,"");

})
</script>

走过的坑

• IOS下不一定支持ES6语法。但ES5语法，一般情况都支持。
• Anki的JavaScript语法中，当需要使用『模板字段』作为字符串时，不能直接使用'{{歌词}}'.replace()方法，需要先报存为一个JS变量，再进行替换。即：var temp = '{{歌词}}'; temp = temp.replace("\n","");
• IOS获取『媒体文件夹』仅支持获取一级目录，二级目录无法获取
• IOS客户端，『手势：轻点』会触发Anki配置的点击，『手势：重点』才能点击到Html的控件。