Adding "make a recording" option in the audio widget

Description

This issue is about adding a possibility to record audio in the audio widget.
This also requires some additional changes in an audio widget.

1. Instead of having all available options instantly make a tab with three choices:

  • Choice 1 (selected by default): Upload Audio File

  • Choice 2: Link Audio Source

  • Choice 3: Record Audio

  • Use the same UI as we use in summary for changing between textual/default editor.

  • Change the tab title to 1em and padding to 0.833em ( this affects all the editors that are using these tabs )

2. Upload file:

  • Design:

  • Have only cancel button. Upload starts when you select audio file, no need for an upload button ( keep the same behavior as we have now )

3. Link source:

  • Design:

  • Same behavior as we have now

4. Record audio:

  • Design:

  • Implement audio recorder here.

  • Starting screen:

  • Recording in progress:

  • Recording paused:

  • Recording done:

  • Audio recorder looks and should work the same way as audio recorder we implemented here. https://h5p.org/node/83471 but should be done as a part of the editor widget.

  • Difference in behavior is that we don't have "download" button when recording is done but instead, we get "insert" button when recording has been made.

  • Pressing cancel at any time would cancel the recording ( with a popup -
    title: Cancel recording?
    content: By pressing "Cancel" you will loose your current recording.)

Acceptance Criteria

It is possible to make a recording in audio widget

Activity

Show:
Frode Petterson
January 8, 2019, 8:18 AM

I fixed the IE11 issue and updated on staging. It should always show the error message, no record button.

Regarding insert on the other tabs, I think this is fine since the audio record is paused when you switch tabs.

Vegulla Gouthami
January 8, 2019, 8:34 AM

: I have verified the IE11 issue and it is working fine now. But the Insert button behavior is not consistent across the tabs, While switching between the tabs.
Ex: First showing the Insert button enabled in File Upload tab and once we switch to any other tabs in the popup and switch back again to the File Upload tab showing the button disabled.

Pål Jørgensen
January 8, 2019, 2:32 PM

I have added some comments on GitHub. If you'd like, we can discuss them...

Frode Petterson
January 9, 2019, 9:22 AM

I've spent an hour to make the code more readable.
This is ready to be improved and tested.

Pål Jørgensen
January 9, 2019, 11:57 AM
Edited

Thank you, . Seems to be much easier to read!

Done

Assignee

Frode Petterson

Reporter

Jelena Milinovic

Labels

Funding

None

Code reviewer

Pål Jørgensen

Released

None

Priority

Medium
Configure