如何在卡片编辑界面提取[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
3 |' G6 e4 n% g& g: R我今天抽空试试。其实有一个不那么美观、但是简单有效的方法，就是你在卡片里，把{{音频}}这个字段复制n次 ...

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

再次感谢！

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

基本流程：

卡负责其模板渲染： render_output
3 w4 N, A5 q6 V
- render_into2 @/ i4 D* F0 A( m# ^
  
  # \5 x) N% B: q) \' _7 y0 r! Y# I
从模板解析{{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
, \3 x1 w4 F2 b5 B+ g
- [sound:]标签也已完成此操作) Y: q- Q# M B- T
- 这会将其转换为AVTag的列表，并且文本表示形式引用此列表的索引。
  ( }& o: c+ c. I9 f
  % b2 T3 r5 A3 c# ?; |7 F) I& F
AVTag的列表存储在卡中： render_card_from_context ， render_card ， question_av_tags
% c8 Q7 b6 M8 [
- 列出了两个列表，一个用于问题，一个用于答案。
  0 q: M; c( i8 ?* i. Z
  - }3 i7 E% w0 b. A4 u) `( j
在卡片上渲染： prepare_card_text_for_display
6 D; O% r6 |' X& h/ Y1 a4 }
- [anki:play]转换为svg，其调用pycmd('play:q:0') av_refs_to_play_icons$ r/ V7 R e) d/ {/ H8 D8 @
  ! p1 Y% ?# U, v
审阅者将卡中的AVTag传递给sounds.av_player ： replay_audio
aqt.sounds.av_player是玩家列表的抽象。这些设置为接受AVTag ，并将其排名为setup_audio _best_player_for_tag
排名逻辑： voice_for_tag
" b0 D. ]/ b4 w- p$ i* .play在播放器上被调用，
添加{{tts-voices}}字段： on_tts_voices/ p0 E2 G) c& a& p; ]& z, v, N

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

arruno 发表于 2022-3-30 22:455 P7 a' N, T* H! Q
那个，js对大小写敏感，你改成innerText试试。innerHTML/innerText' F( I- Q2 \2 T- ^1 o+ Z6 t* ~5 J
另外，直接写上不可以么，如果这个占位 ...

占位符都是[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:456 p+ d# e% A6 B- g* ~! Z
那个，js对大小写敏感，你改成innerText试试。innerHTML/innerText8 X( z5 H( w. @: y& J% [
另外，直接写上不可以么，如果这个占位 ...

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

头秃啊

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

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

arruno 发表于 2022-3-29 12:026 z! ~& w% G' f* O
没有定义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]这个元素