From dfb3fbf002fe9c4a1d7c34daa3adb508fc932d9e Mon Sep 17 00:00:00 2001 From: evandrocoan Date: Sat, 14 Jan 2023 17:11:14 -0300 Subject: [PATCH 1/2] Created the ankimedia documentation section on src/media.md --- src/media.md | 220 +++++++++++++++++++ src/media/ankimedia_full_card_example.png | Bin 0 -> 14870 bytes src/media/javascritp_audio_field_example.png | Bin 0 -> 5934 bytes 3 files changed, 220 insertions(+) create mode 100644 src/media/ankimedia_full_card_example.png create mode 100644 src/media/javascritp_audio_field_example.png diff --git a/src/media.md b/src/media.md index 7ebe7ed7..264b2564 100644 --- a/src/media.md +++ b/src/media.md @@ -50,3 +50,223 @@ Anki uses a program called mpv (and mplayer as a fallback) in order to support sounds and videos. A wide variety of file formats are supported, but not all of these formats will work on AnkiWeb and the mobile clients. MP3 audio and MP4 video seems to be the most universally supported. + +## Javascript and HTML5 + +Because Javascript is an advanced feature and so many things can go +wrong, **Javascript functionality is provided without any support or +warranty**. We can not offer any assistance with writing Javascript, +and we can not guarantee any code you have written will continue to work +without modification in future Anki updates. If you are not comfortable +addressing any issues you encounter, then please avoid using Javascript. +For other Javascript informations, see [template](templates/styling.md#Javascript). + +For issues related to the Javascript features (`ankimedia` object) presented in this section, +please open an issue on https://github.com/evandrocoan/AnkiMediaQueue/issues. +The `ankimedia` object is light integration with Anki interface, +meaning its code does not depend on Anki internal working details. +Therefore, any issues you encounter with it are separate from Anki. +Instead, issues should probably be a problem with the third part `ankimedia` object +developed by a third party. + +The `ankimedia` object was developed as an alternative to platform native audio players such as mpv or mplayer, +so you can use Anki embedded Javascript and HTML5 engine instead to play audio. +To do so, just replace `[sound:myfile.mp3]` by `` +in your fields. +The audio will be able to play if the Javascript and HTML5 engine Anki uses support it. +Otherwise, you may try using the native mpv or mplayer with `[sound:myfile.mp3]` tag. +Next, there is an example of HTML5 media field using HTML editor: + +![Example of HTML5 media field](media/javascritp_audio_field_example.png) + +The HTML5 audio will not be played automatically by default. +If you like to do so, you need to include the following script (Javascript) in your cards templates: +```html + +``` +If you have HTML5 media in both your front and back cards, +you should include the `ankimedia` script in both of your templates, +setting the "front"/"back" value accordingly. + +### Basic example: + +Given the following fields: +* **Verb**: `see` +* **VerbAudio**: `` +* **PastParticiple**: `seen` +* **PastParticipleAudio**: `` + +**Front Template** card example: +```html +What is the past participle of the verb to {{Verb}}? + + + {{VerbAudio}} + + + +``` + +**Back Template** card example: +```html +{{FrontSide}} +
+ + + {{PastParticipleAudio}} + + + +``` + +**Style** card example: +```css +audio { + width: 100%; +} +``` + +This should result in the **visual result** on Anki 2.1.56: + +![Anki media HTML5 live example](media/ankimedia_full_card_example.png) + +### Adding specific media + +Instead of adding all media with `ankimedia.addall()`, +you could only add specific media with `ankimedia.add()`. +This is useful if you wish to play only some media or +want to play some in a different order. +This is an example: +```html + +``` +It will only add all the media found on the `{{VerbAudio}}` field, +even if there are other media on the full page. +To add multiple media from multiple fields, call it multiple times. For example: +```html + +``` +The media will immediately play once the question or answer is shown. +Media from the question will not play again on the answer +unless you pass `"front"` or `"back"` incorrectly. + +Notice that we are adding the field using backtick's (`` ` ``) +instead of single or double quotes: `` `{{field_name}}` ``. +It is required to use backtick's because `{{field_name}}` may contain new lines, +and it would break the HTML structure if single or double quotes were used instead. +This would only cause a problem if backtick's were also found inside the `{{field_name}}`. +In this case, you could replace them with single or double quotes +or use single quotes as `ankimedia.add( '{{field_name}}' )` and inside `field_name` +do not use single quotes or new lines. + +### Playback speed + +By using the global function `setAnkiMedia()`, you can control the playback +speed of your HTML5 audio elements: +```typescript +/** + * Find all audio and video tags and run them through the callback parameter. + * + * @param {Function} callback - to be called on each media. + * @param {Array} initial - an additional list of items to be iterated over. + */ +function setAnkiMedia(callback, initial = undefined); +``` + +For example, this sets the attribute `media.dataset.speed`: +```html + + + + + {{VerbAudio}} + +``` +The `media.dataset.speed` is a special attribute `ankimedia` uses to control the playback speed. +It is not recommended to set only the HTML5 `media.playbackRate` attribute because it is superseded internally by `ankimedia`. +If you are experiencing problems with it, +you may try to set both `media.dataset.speed` and `media.playbackRate` attributes with `setAnkiMedia()`. +For more information about media attributes, consult de HTML5 media documentation: +[developer.mozilla#HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement). + +You may also control the play speed individually on each media field HTML element, +by adding an HTML data attribute called `data-speed`. For example: +``. +`ankimedia` will automatically read it and play this audio using this speed. + +### `ankimedia` object documentation + +The `ankimedia` object support many unique configurations. +This requires you to know how to program on Javascript. +However, some arrangements may be simple enough for anyone to use. +```typescript +/** + * Call this on your front-card before adding new media to the playing queue. + * You can call this function as `setup({delay: 0.3, wait: false})`. + * + * @param {number} delay - how many seconds to wait before playing the next audio (default 0.3). + * @param {boolean} wait - if true (default), wait for the question audio to play + * when the answer was showed before it had finished playing. + * @param {function} extra - a function(media) to be run on each media of the page. + * @param {array} medias - an array of initial values to be passed to setAnkiMedia() calls. + * @param {boolean} auto - if true (default), auto-play the media elements. + * @param {boolean} skip - if true (default), it will skip playing the front media. + */ +ankimedia.setup(parameters: any = {}); + +/** + * Return false if a media was paused and true if a media was started. + */ +ankimedia.togglePause(); + +/** + * Re-play the media as done in the first time the card answer or question was shown. + */ +ankimedia.replay(); + +/** + * Add an audio file to the playing queue and immediately starts playing. + * If not playing already. + * + * @param {string} htmlfield - an audio filename or HTML text as string to find audios for playing. + * @param {string} where - pass "front" if this is being called on the card-front, + * otherwise, pass "back" as it is being called on the card-back. + * If not specified, each media element to be added automatically can also have a + * "data-where" attribute with the value "front" if this is being called on the + * card-front. Otherwise, the value "back" if it is being called on the card-back. + * @param {number} speed - the speed to play the audio, where 1.0 is the default speed. + * Each media element can also have an attribute as `data-speed="1.0"` indicating + * the speed it should play. The `data-speed` value has precedence over this parameter. + */ +ankimedia.add(filename, where = undefined, speed = undefined); + +/** + * Automatically add all media elements found and start playing them sequentially. + * + * @param {string} where - pass "front" if this is being called on the card-front, + * otherwise, pass "back" if it is being called on the card-back. + * If not specified, each media element to be added automatically can also have a + * "data-where" attribute with the value "front" if this is being called on the + * card-front, otherwise, the value "back" if it is being called on the card-back. + * @param {number} speed - the speed to play the audio, where 1.0 is the default speed. + * Each media element can also have an attribute as `data-speed="1.0"` indicating + * the speed at it should play. The `data-speed` value has precedence over this parameter. + */ +ankimedia.addall(where = undefined, speed = undefined); +``` diff --git a/src/media/ankimedia_full_card_example.png b/src/media/ankimedia_full_card_example.png new file mode 100644 index 0000000000000000000000000000000000000000..2d4b77fb5b104a605d277b34529600f092bb83b9 GIT binary patch literal 14870 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 R6lfMeSzcYPLdNp-e*nl08_fU! literal 0 HcmV?d00001 From ebf4dd3234afe1c055d68891c43194d4b4733700 Mon Sep 17 00:00:00 2001 From: evandrocoan Date: Sun, 15 Jan 2023 11:31:19 -0300 Subject: [PATCH 2/2] Add missing note about the
element requirement --- src/media.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/media.md b/src/media.md index 264b2564..2f5be917 100644 --- a/src/media.md +++ b/src/media.md @@ -91,6 +91,14 @@ If you have HTML5 media in both your front and back cards, you should include the `ankimedia` script in both of your templates, setting the "front"/"back" value accordingly. +**Important**: Your back template should have an element on its top, +with the id `answer`, such as `
`. +This element will cause Anki to scroll the answer page down to the question. +If you do not like this behavior, you can rename the `
` to something like `
`. +With this, Anki will stop scrolling down the page, but the `ankimedia` object will keep working correctly. +The element `
` is used internally by `ankimedia` object not to play the question +audio on the answer or the answer audio on the question. + ### Basic example: Given the following fields: