插入音频块示例

插入音频块示例

// audio URL
var audioSrc = "";
// 父id或文档id,必填
var parentID = "20240912201455-z7c6sgc";
// 插入到哪个块下面,为空插入到第一行
var previousID = "20240919194802-ig3zntk";

// 生成块id
var newNodeId = Lute.NewNodeID();
// 生成更新时间
var updated = formatDateTime(new Date());
// audio dom代码
var audioHtml="<div data-node-id=\""+newNodeId+"\" data-node-index=\"1\" data-type=\"NodeAudio\" class=\"iframe\" updated=\""+updated+"\"><div class=\"iframe-content\"><audio controls=\"controls\" src=\""+audioSrc+"\" data-src=\"\"></audio>​</div><div class=\"protyle-attr\" contenteditable=\"false\">​</div></div>"

// 请求api
fetchSyncPost('/api/block/insertBlock', {dataType:"dom", parentID:parentID, previousID:previousID, data: audioHtml});

// 生成块时间 类似dayjs().format("YYYYMMDDHHmmss")
function formatDateTime(date) {
    var year = date.getFullYear();
    var month = ('0' + (date.getMonth() + 1)).slice(-2);
    var day = ('0' + date.getDate()).slice(-2);
    var hours = ('0' + date.getHours()).slice(-2);
    var minutes = ('0' + date.getMinutes()).slice(-2);
    var seconds = ('0' + date.getSeconds()).slice(-2);

    return year + month + day + hours + minutes + seconds;
}

// 请求api函数
async function fetchSyncPost(url, data, returnType = 'json') {
    const init = {
        method: "POST",
    };
    if (data) {
        if (data instanceof FormData) {
            init.body = data;
        } else {
            init.body = JSON.stringify(data);
        }
    }
    try {
        const res = await fetch(url, init);
        const res2 = returnType === 'json' ? await res.json() : await res.text();
        return res2;
    } catch (e) {
        console.log(e);
        return returnType === 'json' ? { code: e.code || 1, msg: e.message || "", data: null } : "";
    }
}

也可以用Markdown方式插入,这样的话,audioHtml可简化为如下:

// audio dom代码
var audioHtml="<audio controls=\"controls\" src=\""+audioSrc+"\" data-src=\"\"></audio>"

// 请求api
fetchSyncPost('/api/block/insertBlock', {dataType:"markdown", parentID:parentID, previousID:previousID, data: audioHtml});

image.png

留下你的脚步
推荐阅读