Change the audio player dimensions so that only the play button is displayed | XM Community
Solved

Change the audio player dimensions so that only the play button is displayed

  • 19 September 2018
  • 9 replies
  • 91 views

Userlevel 4
Badge +22
  • Level 4 ●●●●
  • 49 replies
Is there a way to resize what is displayed for an inserted audio file? We used to be able to resize the window so that only the play button showed, but it seems that feature was removed, and now it shows the play button along with the audio length slider. Changing the html code by clicking 'source' on the question editor doesn't appear to change the size of the button when height and width are altered.

As a separate question but one that would avoid the above, is there a way to tag an audio file to an image, so that when the image is clicked, the audio plays?

Thanks for your help
icon

Best answer by Anonymous 20 September 2018, 11:43

View original

9 replies

Userlevel 3
Badge +1
Using HTML sound file could be placed over an image.
Hello @KKI_Neuropsychology ,

About your this question "As a separate question......the audio plays?"

You audio tag code will not have controls attribute and img code will be as shown in below code:
!
Userlevel 4
Badge +22
Thanks Shashi. This creates the image, but when I click on it the sound still does not play.

I entered the corresponding paths for AUDIO_SRC and IMG_SRC, but was unsure what to enter for ALT_TEXT; maybe this is why?
> @KKI_Neuropsychology said:
> Thanks Shashi. This creates the image, but when I click on it the sound still does not play.
>
> I entered the corresponding paths for AUDIO_SRC and IMG_SRC, but was unsure what to enter for ALT_TEXT; maybe this is why?

(ALT_TEXT will not cause any error)
Just make sure that the id mentioned in audio tag is same as mentioned in the "....getElementById('ID')"

If possible just put a screenshot of code over here
Userlevel 4
Badge +22
This is the code I originally entered:
!



However, once I click out, Qualtrics changes it to this:
!
> @KKI_Neuropsychology said:
> This is the code I originally entered:
> <audio id="player" src="https://kennedykrieger.az1.qualtrics.com/CP/File.php?F=F_aWWgO5e9fS5E1VP"></audio>
> <img src="https://jhmi.co1.qualtrics.com/CP/Graphic.php?IM=IM_4Jk921ypz41gR5r" alt="ALT_TEXT" onclick="document.getElementById('player').play();" width="42" height="42" onclick="" width="42">
>
> However, once I click out, Qualtrics changes it to this:
> <audio id="player" src="https://kennedykrieger.az1.qualtrics.com/CP/File.php?F=F_aWWgO5e9fS5E1VP"> </audio>
> <img alt="ALT_TEXT" height="42" onclick="" src="https://jhmi.co1.qualtrics.com/CP/Graphic.php?IM=IM_4Jk921ypz41gR5r" width="42" />
>
>

So I was asking for screenshot(snipping tool), as done in the above answer.
Also check, you have only one onclick attribute in img element.
I have tested your code here

!
> @KKI_Neuropsychology said:
> This is the code I originally entered:
> !
>
>
>
> However, once I click out, Qualtrics changes it to this:
> !
>
>
>
Your original code in the above screeshot is correct!!! It should work
Userlevel 4
Badge +22
Shashi,
For whatever reason, editing the question in Rich Content Editor/Source didn't work, but when I entered the code in HTML View it works. Thanks so much for your help!

It seems that I typed the same thing as in the accepted answer. However, for some reason, it doesn't work... The play button is displaying, but clicking on it does not produce the sound. Did I type something wrong?
ALT_TEXT 
Thank you!

Leave a Reply