如何在卡片编辑界面提取[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
* B6 ^2 i: F# C ~# ` D0 M) k我今天抽空试试。其实有一个不那么美观、但是简单有效的方法，就是你在卡片里，把{{音频}}这个字段复制n次 ...

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

再次感谢！

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

基本流程：

卡负责其模板渲染： render_output
9 Q8 o" S& I; c4 ^, l; |
- render_into" Q. X, F8 W3 ?: m$ o
  
  5 m1 g! p/ T# [1 S
从模板解析{{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
+ r' L0 h* p, S8 |; v
- [sound:]标签也已完成此操作
  9 }1 [) U5 A! j! G; N) `
- 这会将其转换为AVTag的列表，并且文本表示形式引用此列表的索引。( F' M/ J0 A( s2 n( p" A6 g- W
  2 N$ t u( p, l! u( B. V5 y3 e4 m
AVTag的列表存储在卡中： render_card_from_context ， render_card ， question_av_tags5 d/ O2 a7 {% t/ _) d
- 列出了两个列表，一个用于问题，一个用于答案。6 v }- H/ ^7 t$ n
  i2 B! y1 k$ k0 N- X$ Q. g
在卡片上渲染： prepare_card_text_for_display5 T: s1 W* X. f6 g# s
- [anki:play]转换为svg，其调用pycmd('play:q:0') av_refs_to_play_icons
  f# x" x' |# c8 u1 B/ S# h
  ' o- a! X8 w0 [9 H
审阅者将卡中的AVTag传递给sounds.av_player ： replay_audio
aqt.sounds.av_player是玩家列表的抽象。这些设置为接受AVTag ，并将其排名为setup_audio _best_player_for_tag
排名逻辑： voice_for_tag- D# [. ~1 |/ ~1 r
* .play在播放器上被调用，
添加{{tts-voices}}字段： on_tts_voices
; s) P* ^: Y6 N3 J! U2 s( U" H

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

arruno 发表于 2022-3-30 22:45
; e' W" l# X l那个，js对大小写敏感，你改成innerText试试。innerHTML/innerText6 P1 t9 h9 }$ 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:454 ]0 H: Q, w* _2 \
那个，js对大小写敏感，你改成innerText试试。innerHTML/innerText1 T% \8 W+ D/ k( t7 k. d8 a A: c5 d
另外，直接写上不可以么，如果这个占位 ...

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

头秃啊

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

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

arruno 发表于 2022-3-29 12:02
, W% T. d- k) V, n: {. Y! R9 m没有定义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]这个元素