如何在卡片编辑界面提取[sound:xxxxxx.mp3]这个元素

496147678 · 发表于 2022-3-28 15:07:02

本帖最后由 496147678 于 2022-3-28 15:09 编辑

想用
<audio loop autoplay controls src="xxxxx.mp3">的方式完成音频无限制自动循环播放

于是想提取 xxxxx 的内容

var price = document.getElementById("audio").innerTEXT;
alert (price)

但是并不可行，想破脑袋，不知道有什么解决方法

已经定义了音频的 id=audio
price反馈的结果是空白

用这个方法去弄expression，也就是{{正面}}，是可行的

496147678 · 发表于 2022-4-1 20:27:38

arruno 发表于 2022-4-1 10:46# s3 q7 i( w* D7 d0 v
我今天抽空试试。其实有一个不那么美观、但是简单有效的方法，就是你在卡片里，把{{音频}}这个字段复制n次 ...

十分感谢！！我就准备这么做了。另外我也看到了一个帖子，也挺有意思的，与帖子无关，也可以看看学习一下。

再次感谢！

———————————————

基本流程：

卡负责其模板渲染： render_output
. b$ K, y) I' j
- render_into
  3 c8 W" _) \) f8 `' Q+ n
  - X B$ }+ \7 C9 e2 R% Z
从模板解析{{tts en_US voices=Bob,Jane:Field}}并转换为[anki:tts][en_US voices=Bob,Jane]text[/anki:tts] ： tts_filter
从[anki:tts]转换为[anki:play:q:0] ： extract_av_tags. P; {9 y$ w% G6 a
- [sound:]标签也已完成此操作, P' s+ P5 y- E$ @- x* I. k7 \
- 这会将其转换为AVTag的列表，并且文本表示形式引用此列表的索引。
  Y% M8 |4 c/ U9 N w# r0 s! L1 g! m) V) H3 s9 ^9 b3 D
AVTag的列表存储在卡中： render_card_from_context ， render_card ， question_av_tags( ]# X: A B) }- w3 @
- 列出了两个列表，一个用于问题，一个用于答案。/ y4 b% q; l5 D" u) Y7 i
  
  & a# l4 Q# B, T+ w# Y+ K
在卡片上渲染： prepare_card_text_for_display( @$ H, S5 m+ E6 [
- [anki:play]转换为svg，其调用pycmd('play:q:0') av_refs_to_play_icons
  5 {4 l2 A* u, X' s: w; K# B4 y/ q
审阅者将卡中的AVTag传递给sounds.av_player ： replay_audio
aqt.sounds.av_player是玩家列表的抽象。这些设置为接受AVTag ，并将其排名为setup_audio _best_player_for_tag
排名逻辑： voice_for_tag) o4 M3 V8 N9 N$ e' ~
* .play在播放器上被调用，
添加{{tts-voices}}字段： on_tts_voices
. o, t8 R S; b

496147678 · 发表于 2022-3-31 19:36:58

arruno 发表于 2022-3-30 22:45
2 x; m$ o1 U" k% R4 r) D1 n那个，js对大小写敏感，你改成innerText试试。innerHTML/innerText
! l; }% h3 ]; k- [另外，直接写上不可以么，如果这个占位 ...

占位符都是[sound:appppppple.mp3]的格式，我在浏览器上测试过了没有问题，anki里跑不成，其他方式也试过了，都不行

卡片HTML部分：
<span id="audio1" class="voice">{{音频}}</span>
<audio id="audio2" loop autoplay></audio>

JS部分：
var str = document.getElementById("audio1").innerHTML;
var txt = str.replace("[sound:","").replace("]","");
txt = "<source src=" + txt + ">"
document.getElementById("audio2").innerHTML = txt;

496147678 · 发表于 2022-3-31 19:15:27

arruno 发表于 2022-3-30 22:45
4 ~+ f2 y8 ]+ L- T9 x* H/ c2 |# c: `那个，js对大小写敏感，你改成innerText试试。innerHTML/innerText J1 p$ \) s1 S
另外，直接写上不可以么，如果这个占位 ...

尝试过了，不行，哎。似乎各种方法都识别不了{{音频}}，似乎卡片在生成之前就已经被提取转换了。

头秃啊

496147678 · 发表于 2022-3-29 23:14:02

本帖最后由 496147678 于 2022-3-29 23:23 编辑

arruno 发表于 2022-3-29 12:02: v- M+ R5 j# i1 m, v
没有定义id啊，document.getElementsByTagName("audio")[0].src 这样就可以

您可能没有理解我意思。
举个例子，我现在有一张卡片，卡片正面是apple，这张卡片是有音频的，但音频的文件名是随机的，我不清楚。我现在想让这张卡片音频循环播放，于是想到用<audio loop autoplay controls src="xxxxx.mp3">的方法，其中xxxx我不知道。于是我想提取每张卡片的音频文件的名字。
卡片正面是这样的：
<div class="section">
<div class="expression">{{单词}}</div>
<span id=“audio” class="voice">{{音频}}</span
</div>

也就是我想知道 {{音频}} 的名字是什么，以便下一部操作

于是我尝试：
var price = document.getElementById("audio").innerTEXT;
alert (price)
price返回是undefined

您的方法我也试了，也是一样

很抱歉麻烦您了，您看看有什么好的建议吗

arruno · 发表于 2022-3-29 12:02:08

<audio loop autoplay controls src="xxxxx.mp3"> 没有定义id啊，document.getElementsByTagName("audio")[0].src 这样就可以

arruno · 发表于 2022-3-30 22:45:04

那个，js对大小写敏感，你改成innerText试试。innerHTML/innerText
另外，直接写上<audio loop autoplay controls src="{{音频}}">不可以么，如果这个占位符就是文件名本身的话，不需要再用js绕一下。

arruno · 发表于 2022-4-1 10:46:14

本帖最后由 arruno 于 2022-4-1 10:59 编辑

我今天抽空试试。其实有一个不那么美观、但是简单有效的方法，就是你在卡片里，把{{音频}}这个字段复制n次，它就会自动播放n次。
比如：{{音频}}{{音频}}{{音频}} 这样就会重复3次。
如果不能解决，至少这样可以部分实现你的需求。

———————————————
看了一下，是我的疏忽，音频比较特殊，会被Anki模板引擎渲染成这样的HTML结构：
<a class="replay-button soundLink" href="#" onclick="pycmd('play:a:0'); return false;">
<svg class="playImage" viewBox="0 0 64 64" version="1.1">
<circle cx="32" cy="32" r="29"></circle>
<path d="M56.502,32.301l-37.502,20.101l0.329,-40.804l37.173,20.703Z"></path>
</svg>
</a>
建议还是用上面的方法吧，可以加一个hidden属性做好看一点：

<div hidden="true">
{{音频}}
{{音频}}
{{音频}}
</div>

		自动登录	找回密码
密码			免费注册

[经验交流] 如何在卡片编辑界面提取[sound:xxxxxx.mp3]这个元素