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

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

再次感谢！

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

基本流程：

卡负责其模板渲染： render_output
' B# }, h6 C# M. ~" B( Y
- render_into
  6 B' M; O/ g6 F2 S2 N2 i8 a0 D5 N& t" [
从模板解析{{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_tags8 ?2 P+ t( E1 G% `& t" P% Y
- [sound:]标签也已完成此操作
  ; K7 Z) g3 W# Q' j
- 这会将其转换为AVTag的列表，并且文本表示形式引用此列表的索引。
  , X5 o) }1 u0 K) b5 M( N/ [+ [1 f. `! F7 q b3 g
AVTag的列表存储在卡中： render_card_from_context ， render_card ， question_av_tags
4 v5 d2 @. ~) g$ O! [3 A0 `. S2 r
- 列出了两个列表，一个用于问题，一个用于答案。
  * B* a o8 Q5 T* s" ~+ q2 w9 v: r1 S; ]6 Q
在卡片上渲染： prepare_card_text_for_display
& ?& p# E( H4 u+ r$ Y5 ?4 N
- [anki:play]转换为svg，其调用pycmd('play:q:0') av_refs_to_play_icons M3 M. F- y, d# f/ v T8 Z0 H
  
  " B, }4 \$ v9 Y6 G( R5 }9 R( W
审阅者将卡中的AVTag传递给sounds.av_player ： replay_audio
aqt.sounds.av_player是玩家列表的抽象。这些设置为接受AVTag ，并将其排名为setup_audio _best_player_for_tag
排名逻辑： voice_for_tag: \5 P! g: b$ p
* .play在播放器上被调用，
添加{{tts-voices}}字段： on_tts_voices) O9 \; r6 [: \5 v9 t- S/ C+ {# B

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

arruno 发表于 2022-3-30 22:45
: j. w2 J$ E- L, l; s那个，js对大小写敏感，你改成innerText试试。innerHTML/innerText
. n+ J7 v t9 o* m6 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 r" }, N! W" B) T! \1 x5 @那个，js对大小写敏感，你改成innerText试试。innerHTML/innerText
9 O! _+ e' N" }- A+ Y另外，直接写上不可以么，如果这个占位 ...

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

头秃啊

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

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

arruno 发表于 2022-3-29 12:02$ r' h4 K) V" {, j1 H: g( t5 r' S
没有定义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]这个元素