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

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

  • September 19, 2018
  • 9 replies
  • 154 views

JonesE
Level 4 ●●●●
Forum|alt.badge.img+26
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

Best answer by Anonymous

> @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

9 replies

christopeter
Level 2 ●●
Forum|alt.badge.img+1
  • Level 2 ●●
  • September 19, 2018
Using HTML sound file could be placed over an image.

  • September 19, 2018
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: !

JonesE
Level 4 ●●●●
Forum|alt.badge.img+26
  • Author
  • Level 4 ●●●●
  • September 19, 2018
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?

  • September 19, 2018
> @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

JonesE
Level 4 ●●●●
Forum|alt.badge.img+26
  • Author
  • Level 4 ●●●●
  • September 19, 2018
This is the code I originally entered: ! However, once I click out, Qualtrics changes it to this: !

  • September 19, 2018
> @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 !

  • Answer
  • September 20, 2018
> @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

JonesE
Level 4 ●●●●
Forum|alt.badge.img+26
  • Author
  • Level 4 ●●●●
  • September 20, 2018
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!