当前位置：首页 > news >正文

markdown 中启用音频支持

news 2025/4/28 10:24:45

markdown 中启用音频支持

markdown 默认不支持音频文件，我们通过 html 标签渲染

flask项目

其中音频文件放在 /static/audios/vad_example.wav

markdown 内容如下：

## 音频播放器示例
<audio controls  ><source src="vad_example.wav" type="audio/wav">
</audio>

1编辑器预览替换

其中html 代码：

        <div id="create-editormd" class="editor"><textarea name="doc" id="doc"data-id="{{ '' if not post else post['id']  }}">{{ request.form['doc'] or post['body'] if post else '' }}</textarea></div>

js脚本：

预览区域是标签 editormd-preview
通过 onload 预览触发替换

<p>&lt;audio controls &gt;<br> &lt;source src="vad_example.wav" type="audio/wav"&gt;<br>&lt;/audio&gt;</p>

替换为html代码：

<audio controls  ><source src="{{ url_for('static', filename='audios/vad_example.wav') }}" type="audio/wav">
</audio>

<script type="text/javascript">var testEditor;var textarea = document.getElementById('doc');var currentDocId = textarea.getAttribute('data-id');let lastCursorPos = null; // 用于存储光标位置的变量let selectedText = ''; // 用于存储选中文本的变量$(function () {testEditor = editormd("create-editormd",{width: "90%",height: 640,syncScrolling: "single",path: "{{ url_for('static',filename='editormd/lib/') }}",imageUpload: true,imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL: "/upload/upload_image",  // 设置图片上传的服务器路径onload: function () {console.log("onload");console.log("this.previewContainer : ", this.previewContainer);// 动态替换音频文件路径const audioPathPrefix = "{{ url_for('static', filename='audios/') }}";const previewContainer = document.querySelector('.editormd-preview');if (previewContainer) {console.log("Found preview container:", previewContainer);// 查找并替换 <p> 标签内的音频标签const pElements = previewContainer.querySelectorAll('p');pElements.forEach(pElement => {const htmlContent = pElement.innerHTML;// 使用正则表达式匹配 <p> 标签内的音频标签const audioRegex = /&lt;audio\s+controls[^&gt;]*&gt;[\s\S]*&lt;source\s+src="([^"]+)"\s+type="audio\/wav"[^&gt;]*&gt;[\s\S]*&lt;\/audio&gt;/g;const matches = htmlContent.match(audioRegex);if (matches) {matches.forEach(match => {// 替换 &lt; 和 &gt; 为 < 和 >let actualHtml = match.replace(/&lt;/g, '<').replace(/&gt;/g, '>');// 移除 <br> 标签actualHtml = actualHtml.replace(/<br>/g, '');// 替换 <p> 标签内的内容pElement.innerHTML = pElement.innerHTML.replace(match, actualHtml);console.log("Replaced audio tag:", actualHtml);});}else{console.log("No audio tags found in p element.");}});// 更新音频文件路径const audioElements = previewContainer.querySelectorAll('audio source');if (audioElements.length > 0) {console.log("Found audio elements:", audioElements);audioElements.forEach(element => {const originalSrc = element.getAttribute('src');const newSrc = audioPathPrefix + originalSrc;element.setAttribute('src', newSrc);console.log("Updated src from", originalSrc, "to", newSrc);});} else {console.log("No audio elements found.");}} else {console.log("No preview container found.");}}});});</script>