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

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

再次感谢！

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

基本流程：

卡负责其模板渲染： render_output
! ]3 W- R; r9 w" r2 ~
- render_into
  3 ?6 E- ^; z3 x' y3 g% o$ v" F; l3 | c5 _3 a6 n9 {
从模板解析{{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/ ^; c9 f! x4 p% m( J
- [sound:]标签也已完成此操作
  1 j4 }9 e/ P- Z# Y1 L
- 这会将其转换为AVTag的列表，并且文本表示形式引用此列表的索引。+ \3 O4 F5 y! W
  
  ; h$ o2 z& L+ C# A9 l N
AVTag的列表存储在卡中： render_card_from_context ， render_card ， question_av_tags
: R+ K& w, H, Q5 B, C; C
- 列出了两个列表，一个用于问题，一个用于答案。
  5 K" b# P: B/ y7 w |+ @& k2 q% P3 [6 f; U; v- t
在卡片上渲染： prepare_card_text_for_display
. H/ x% A8 j- c
- [anki:play]转换为svg，其调用pycmd('play:q:0') av_refs_to_play_icons
  6 o) f+ g$ s9 f8 K3 x: s7 `1 Y8 ~( a* b, J
审阅者将卡中的AVTag传递给sounds.av_player ： replay_audio
aqt.sounds.av_player是玩家列表的抽象。这些设置为接受AVTag ，并将其排名为setup_audio _best_player_for_tag
排名逻辑： voice_for_tag+ Q, J1 ]/ Z; S2 h) i g
* .play在播放器上被调用，
添加{{tts-voices}}字段： on_tts_voices
; F. L! {- h& N

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

arruno 发表于 2022-3-30 22:45! Z' N- J- ~* V3 s- N5 o1 {+ l5 t% Q" c
那个，js对大小写敏感，你改成innerText试试。innerHTML/innerText
. q- r/ k2 P5 \另外，直接写上不可以么，如果这个占位 ...

占位符都是[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; T2 ~! [, X2 a6 r+ t
那个，js对大小写敏感，你改成innerText试试。innerHTML/innerText' |$ c8 u9 a7 C0 Z+ v4 i6 \
另外，直接写上不可以么，如果这个占位 ...

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

头秃啊

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

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

arruno 发表于 2022-3-29 12:02, m, b& y1 a7 w/ l
没有定义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]这个元素