Ability to make transparent (hidden) audio buttons

Submitted by febster on Mon, 01/09/2017 - 09:12
febster's picture
Forums: 
Feature requests

Hi again!

I use H5P to create Mandarin learning lessons. Currently, when you want to display audio on a page, you need to display the blue round button.

Was wondering if in the future, we could make the audio buttons transparent...So, if I wanted to hear the audio of word, then I could overlay on my word (stretch it or shape it around) then make it transparent.

This way, you could save precious screen space by not having to display blue buttons everwhere and just have people click words to hear the audio vs. currently having to click the button. Just a thought, but I think it would free up a lot of screen real estate which I often find that I am battling for.

Love H5P! Cheers!

Timothy

Summary: 
Transparent audio button
Content types: 
Course Presentation
Issue Status: 
Open
0
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network
tomaj's picture

tomaj

Mon, 01/09/2017 - 10:31

Hi Timothy,

I can see how this could clean up the look of the presentations, and save page realestate. :)

Do you think a pointer (hand mouse symbol) would be enough for students, to understand what the interaction expected of them to perform are?

- Tom

febster's picture

febster

Tue, 01/10/2017 - 00:59

Yes, that would be good. If a very small / 50% transparency button appeared at the corner, that would be good. Just think that some selections might be more circular and others more square.

Anyhow, I could see such an option as something bigger, as you could do same thing with text boxes, etc. You make a transparent button, which you can overlay on a text or pictures, when you click on it, then you can into a lightbox window. 

Anyhow, just a desired feature. Love using H5P here in NZ!

Timothy

icc's picture

icc

Wed, 01/11/2017 - 10:51

This sounds like really neat feature when learning languages. Thank you for suggesting it and sharing your thoughts!

serettig's picture

serettig

Sat, 01/28/2017 - 11:49

I'm on this and have written a first implementation by adding a third option 'Transparent' to the audio element besides 'Minimalistic' and 'Full'. It behaves like the minimalistic button but can't be seen except by the fact that the mouse pointer changes when you hover over it.

Can you clarify what you mean by a "very small / 50% transparency button"? Are you thinking of an element that only becomes visible when you hover with the mouse pointer over the area but that is completely invisible when the mouse is not over it?

What I've written also only works for the html5 audio component, not for the flash component and I don't know how to make Flash transparent and yet retain its functionality.

It's not completely finished yet, as I want to add something like the "go to slide" user interface in the editor to make it easier to see there, but I'll add this this weekend.

Sebastian

serettig's picture

serettig

Sat, 01/28/2017 - 21:06

I'm done with the feature and I'd like to create a pull request on GitHub. However, access is denied to me by GitHub. Do I need to get some kind of permission to do a pull request for h5p? I'm new to Git (worked with tfs so far) and a bit confused about how this works.

otacke's picture

otacke

Sat, 01/28/2017 - 22:44

You can fork a repository to your own (think of it as a copy), make changes there and then request to pull the changes to the original repository.

serettig's picture

serettig

Sat, 01/28/2017 - 23:18

Ok, got it, thanks!

I've created the pull request by forking. So is the h5pcli tool mainly to be seen as a tool to get the requires files for development?

otacke's picture

otacke

Sat, 01/28/2017 - 23:35

No, there are some more things it can help you with, and probably some more to come. For example, you can create new language files from semantics.json or (soon) check existing ones for errors. Did you already find the "help" option which tells you some more? 

febster's picture

febster

Sat, 01/28/2017 - 21:28

Hi there. That's fabulous! 

I think as long as when your mouse pointer hovers over a transparent button, you get some indication there is a button there, is fine. I teach languages, my thought is if you have a word like '你好'...When I hover over this word, I would want to see the word itself and also see there is transparent audio button there to click. That's what kinda what I was meaning by 50% transparency...

Not sure if it's hard, but also the more one can shape the transparent button's contour to the object, the better...round and square shapes, or square shapes that have rounded edges. If the button is only round/circular, then it wouldn't look as good, as an audio circle usually isn't the best to fit for the contour of words of square and rectangle shaped outlines of words and sentences...Anyhow, I'm SUPER excited you picked up on this idea! 

Flash is no longer relevant to me...so, HTML5 is great!

Awesome! THANK YOU SO MUCH!

serettig's picture

serettig

Sat, 01/28/2017 - 23:28

Hi,

You can see what I've done in the attached images. I've experimented with having a partly transparent symbol indicating that there's audio when you hover over the element, but if the transparency is too low, you cannot really see what the symbol is and if it's about 50% you can't read the text anymore. So I've decided to just highlight the area of the element in blue, as can be seen in the screenshot of presentation mode. I'm actually hovering over 我是 with my mouse there, but the pointer doesn't show in the screenshot.

In editor mode I've kept the speaker symbol and added a blue dashed border to make it easier to distinguish transparent audio elements from 'go to page' elements.

I hope this is what you had in mind. The contour is rectangular right now, but allowing customization is possible, I think. I'll look into this into soon, but I've got many test papers to correct tomorrow - I'm a language teacher, too.

Attachments: 
Image icon editor_mode.png
Image icon presentation_mode.png
febster's picture

febster

Sun, 01/29/2017 - 05:38

Thanks again! What language do you teach?

Yah...looks great. I think it will work quite well. 

This is going to clean things up a ton! From my slide pic, you can see how this is going make things a lot better!

Timothy

Attachments: 
Image icon Screen Shot 2017-01-29 at 5.36.21 PM.png
serettig's picture

serettig

Sun, 01/29/2017 - 19:11

Happy to be of help! BTW: I'm also thinking about adding a new module that allows you to record speech and play it. This might also be useful for pronunciation exercises like you are using.

I teach English at a secondary school and I'm a native speaker of German.

Let's see how long it takes until the pull request is processed. I guess it'll be some time before the change will be published in a release.

febster's picture

febster

Sun, 01/29/2017 - 20:39

Cool! Wow, yah, we're in the same field. In the morning I teach English to Chinese immigrants to NZ, and also in the afternoon I teach Chinese to New Zealanders.

My thoughts exactly regarding the recording of speech and be able to play it back! That is a really important feature I've neen in other English phonics software. This is extremely high on my wishlist for H5P features...You should check out an English reading app called 'Homer'. I think it would perhaps give you an interesting reference point if you decided to implement this. Cheers! Timothy

tomaj's picture

tomaj

Mon, 01/30/2017 - 08:18

Hi Serettig,

It's very cool that you are getting involved in development. We in the core team always find it very motivating to see contributions from the community.

And yea, it will take a little bit of time, for a pull request to go trough a testing phase (if it's accepted).

It would be good if you link to this forum thread in a comment in the pull request, so that the reviewer can get a bit more context.

- Tom

tomaj's picture

tomaj

Mon, 01/30/2017 - 08:28

Hi Serettig,

The core team also have some stuff going on with recorded speach, so I recommend that you coordinate with us before you put a lot of work into it.

I suggest that you post it as a feature request on the forum, where you explan what you plan to do. And also state clearly that you plan to deveop this feature.

We can pick up the dialogue from there.

- Tom

tim's picture

tim

Mon, 01/30/2017 - 08:57

cross post for reference:

https://github.com/h5p/h5p-audio/pull/6

febster's picture

febster

Thu, 04/27/2017 - 13:27

Hi there! Congrats the latest release! Loving H5P!

Just curious when the transparent audio button will to added to a release. I use a lot of audio in language learning and this is gonna be a presentation game changer!

As always, look forward to seeing what's new!

Cheers,

Timothy

falcon's picture

falcon

Wed, 05/03/2017 - 20:41

Hi, we don't have a release date for it yet. We actually planned to release it today, but found some bugs, so hopefully it won't be long until the next time we try :)

febster's picture

febster

Sun, 05/07/2017 - 04:51

Falcon,

Appreciate the update! Cheers for that!

Best, Timothy

kangland

Thu, 01/11/2018 - 16:24

Hi febster

I'm chinese . I'm a Japanese Teacher.

I really will to take a look your site.  

Can you please share your website ? 

Thank you so much !

dustinoflancaster

Thu, 07/13/2017 - 11:34

Hi,

I wonder if this is an error. When viewing a presentation with audio, the audio looks like a black bar - this is on an iPhone 6s using Chrome. When viewing it in Chrome on a PC/Mac, it looks fine. Any potential answers for this?

Thanks!

Dustin 

Attachments: 
Image icon screenshot.png
BV52's picture

BV52

Thu, 07/13/2017 - 14:06

Hi,

Is it possible to share the link to the site? Or at least share the content here so that we I test this?

-BV52

dustinoflancaster

Thu, 07/13/2017 - 14:09

Hi,

As it's via a closed Moodle site I'm not able to - I attached a screenshot though if that helps? 

BV52's picture

BV52

Thu, 07/13/2017 - 14:15

Thanks for the info. I'll just create a test presentation but just to be sure the screenshot that you shared contains "Text" and "Audio" contents only?

-BV52

dustinoflancaster

Thu, 07/13/2017 - 14:17

That's right. Well, it has text, audio and a template overlay. When viewed on a mobile, a black bar comes up rather than a player-type interface. 

BV52's picture

BV52

Thu, 07/13/2017 - 16:10

So that I don't have to mix and match the settings can you please provide the settings below:

1. Player Mode (Minimalistic, Full or transparent)

2. Fit to wrapper (Yes or No)

3. Enable Controls (Yes or No)

4. Enable Autoplay?

5. Comments?

6. Always display comments?

7. Background opacity?

8. Is the audio hosted somewhere else or on your site.

9. Lastly where was the content created (Moodle, Drupal or Wordpress)

 

-BV52