How do I make the audio player just show the play button? Or use my own image? | XM Community
Question

How do I make the audio player just show the play button? Or use my own image?

  • 25 August 2020
  • 13 replies
  • 1718 views

Userlevel 1

I am trying to add narration to each response item. I have tried to adjust the dimensions of the audio player, but it still shows the other elements.
I would like to have participants click an image (either a play button or a speaker icon) to play the audio. I am open to creating the image myself, but I cannot figure out how to enable it to play the audio.
Thank you!


13 replies

Userlevel 7
Badge +22

Use below code to put audio with hidden control, in HTML view question text:


Put an image in the question text and then add below code to play audio on image click:
jQuery("img").on('click',function(){

jQuery('audio').trigger("play");

});

Userlevel 1

Thank you! Unfortunately this is not working for me. When I put:

into the html editor for the question response it makes the text disappear as well. I can make the play bar disappear with hidden=true.
I tried adding:
jQuery("img").on('click',function(){

jQuery('audio').trigger("play");

});
to the javascript for the question, but it does not seem to do anything.
When I click the graphic, it simply selects the answer option and does not play anything aloud.
I tried adding the image in both the rich content editor and the "Insert graphic..." option.

Any other ideas?

Userlevel 7
Badge +22

Check this video

Userlevel 1

I am trying to do this in the response options, not as the question text (i.e. answer choices are "yes", "no", "maybe" and I want the participant to be able to click on an image next to "yes" and hear "yes" read aloud to them.

Userlevel 7
Badge +22

https://www.qualtrics.com/community/discussion/comment/29583#Comment_29583Create three hidden audio tag in html view of the question and assign them class attribute and value as yes, no, maybe and then use below code:

this.questionclick = function(event,element)
  {
    console.log(event, element);
    if (element.type == 'radio')
    {
      var choiceNum = element.id.split('~')[2];

      if (choiceNum ==1)
      {
        jQuery('.yes').trigger("play");
      }
      else if (choiceNum ==2)
      {
        jQuery('.no').trigger("play");
}else{

jQuery('.maybe').trigger("play");
}
    }
  }

Userlevel 1

How do I do this?
"Create three hidden audio tag in html view of the question and assign them class attribute and value as yes, no, maybe"

Userlevel 7
Badge +22

https://www.qualtrics.com/community/discussion/comment/29588#Comment_29588Put this HTML in html view of question and change the URL of audio source tag with respective audio:





Userlevel 7
Badge +22

If you don't want to use audio files, then you can also just put this code in javscript which uses js speech library:
this.questionclick = function(event,element)
  {
    console.log(event, element);
    if (element.type == 'radio')
    {
      var choiceNum = element.id.split('~')[2];



      if (choiceNum ==1)
      {
       var msg = new SpeechSynthesisUtterance('Yes');
        window.speechSynthesis.speak(msg);
      }
      else if (choiceNum ==2)
      {
        var msg = new SpeechSynthesisUtterance('No');
        window.speechSynthesis.speak(msg);
}else{

var msg = new SpeechSynthesisUtterance('Maybe');
        window.speechSynthesis.speak(msg);
}
    }
  }

Userlevel 1

Thank you so much! It worked!!!
Some of my questions have 2 or 4 responses. How would I adjust the JS for those?

Userlevel 7
Badge +22

Which code have you used?

Userlevel 1

this.questionclick = function(event,element)
  {
    console.log(event, element);
    if (element.type == 'radio')
    {
      var choiceNum = element.id.split('~')[2];

      if (choiceNum ==1)
      {
        jQuery('.yes').trigger("play");
      }
      else if (choiceNum ==2)
      {
        jQuery('.no').trigger("play");
}else{

jQuery('.maybe').trigger("play");
}
    }
  }
I used this one

Userlevel 7
Badge +22

Create the audio tags, equal to the number of options present in the question and assign them uniques class name.

In the JS code just add if conditions with respective class name in it as shown below:
this.questionclick = function(event,element)
  {
    console.log(event, element);
    if (element.type == 'radio')
    {
      var choiceNum = element.id.split('~')[2];

      if (choiceNum ==1)
      {
        jQuery('.yes').trigger("play");
      }

     if (choiceNum ==2)
      {
        jQuery('.no').trigger("play");
}

if (choiceNum ==3){

jQuery('.maybe').trigger("play");
}

if (choiceNum ==4){

jQuery('.optionFour').trigger("play");
}
    }
  }



Userlevel 1

THANK YOU SO MUCH!
Please take a look at my other questions if you have time 🙂

Leave a Reply