Код text + audio Js правильно работает в браузере, но не работает через смартфон. Что за глюк?

Question

Существует код JS, который воспроизводит звук при нажатии на текст. Я вставляю этот код на свой сайт, все работает через браузер, но когда я go на этот сайт через свой смартфон, когда я нажимаю на текст, звук не воспроизводится.

// предположим что здесь будут все предложения
var data = [
  {
    id: 0,
    html: `
    <p data-id="0">
    <span data-phrase="i knew">Я знала</span>
    </p>
    `,
    audio: 'https://dailyeng.com/audio/58.mp3',
    phrases: {
      'i knew': [0, 0.3],
    } 
  }
]
// перебираем их и добавляем в body
data.forEach(s => document.body.insertAdjacentHTML('afterbegin', s.html))

// получаем все только что добавленные предложения
var sentences = document.querySelectorAll('p')
// вешаем на них события click
sentences.forEach(s => s.addEventListener('click', sentenceClickHandler))

// currentTarget - предложение, target - фраза
function sentenceClickHandler(e) {
	// ищем id предложения в массиве data которое равно id предложения по которому произошел клик
  // записываем его в переменную
	var sentence = [...data.filter(s => e.currentTarget.dataset.id == s.id)][0]
  // тут можно что-нибудь придумать, что бы каждый раз не создавать новое аудио
  // для демонстрационных целей, пусть будет так
  var audio = new Audio(sentence.audio)
  // когда данные аудио загружены проигрываем фразу по которой произошел клик
  audio.onloadedmetadata = () => playPhrase(audio, sentence.phrases[e.target.dataset.phrase])
}

function playPhrase(audio, timestamps) {
	// start-time
	audio.currentTime = timestamps[0];
  audio.play()
  								// end-time
  stopAudio(audio, timestamps[1])
}

function stopAudio(audio, dur) {
	var dur = dur == 'end' ? audio.duration: dur
 
	setTimeout(() => {
  	audio.pause()
  }, dur * 1000)
}

span {
  background-color: lightblue;
  cursor: pointer;
}

В чем может быть проблема? P. S - JS включен на смартфоне и другие коды js работают правильно