Html5 tags and javascript stripped out form radio labels

Question

On D7, I have the following simplified code

    function mymodule_multistep_form($form, &$form_state, $vars) {

    $mystatictext = get_my_static_text($vars);  
    $options ='<div class="player"><audio><source src="castel.mp3" type="audio/mpeg"></audio><a style="cursor:pointer;" onclick="toggleAudio(this.previousElementSibling)">' . $mystatictext .'</a>
            </div>';

    $form['quiz']['question_'.$step] = array(
        '#type' => 'radios',
        '#weight' => 11,
        '#prefix' => '<ul class="exercise_ul">',
        '#suffix' => '</ul>',
        '#options' => $options,
        );
    
        return $form;   
         }

The resulting HTML is the following:

<ul class="exercise_ul">
    <div id="edit-question-0" class="form-radios">
        <div class="form-item form-type-radio form-item-question-0">
            <input type="radio" id="edit-question-0-2" name="question_0" value="2" class="form-radio">
                <label class="option" for="edit-question-0-2">
                    <div class="player"<a>Option 1</a></div>
                </label>
        </div>
        <div class="form-item form-type-radio form-item-question-0">
            <input  type="radio" id="edit-question-0-1" name="question_0" value="1" class="form-radio">
            <label class="option" for="edit-question-0-1">
                <div class="player"><a>Option 2</a></div>
            </label>
        </div>

        <div class="form-item form-type-radio form-item-question-0">
            <input  type="radio" id="edit-question-0-5" name="question_0" value="5" class="form-radio">
                <label class="option" for="edit-question-0-5">
                    <div class="player"><a>Option 3</a></div>
                </label>
        </div>
        
        <div class="form-item form-type-radio form-item-question-0">
            <input  type="radio" id="edit-question-0-0" name="question_0" value="0" class="form-radio">
                <label class="option" for="edit-question-0-0">
                    <div class="player"><a>Option 4</a></div>
                </label>
        </div>
    </div>
</ul>

The <audio><source>tags and the onclick javascript are stripped out. After many many hours of debugging and hair pulling, I found that the function filter_xss_admin strips out the <audio> tag and I guess that it strips out the onclick javascript on the <a> tag.

My understanding is that the way to address this issue is with a field template. However I do not know which should be the template name, nor its content, in my case.

I understand that the reason for stripping out some tags is to prevent xss, my question is not about the security reasons for stripping out the audio tag.

How can I keep the <audio> tag in the radio label and the onclick javascript on the <a> tag? Any option, with the field template or any other solution.

Thank you