использование «ontouchstart» или «onclick» в зависимости от устройства для настраиваемого аудио набора

Question

Я создал веб-сайт, на котором пользователи могут использовать различные аудиодиски для создания собственного уникального звукового звука (ie смесь дождя, потрескивающего огня и т. Д. c). Мой сайт связан по ссылкам ниже:

http://immerseinnature.com/

Я не могу заставить звук работать на мобильных устройствах или устройствах с сенсорным экраном. Я думаю, что это связано с моим использованием onclick = "play ()" во входном теге html. Когда я заменяю onclick на ontouchstart, аудиодиски работают на устройствах с сенсорным экраном, но не на рабочем столе.

Кто-нибудь знает, есть ли способ, которым я мог бы заставить onclick и ontouchstart работать одновременно?

спасибо

HMTL

JS

var audio_file_1;
var volume1;

        function init()  {
        audio_file_1 = document.getElementById("cs_audio");
         volume1 = document.getElementById("volume1");
         audio_file_1.play();
        }

        function setVolume() {
        var audio_file_1  = document.getElementById("cs_audio");
        audio_file_1.volume = document.getElementById("volume1").value;

        }


        function play() {
        var audio = document.getElementById("cs_audio");
        audio.play();
        }

Answer 1

const event = "ontouchstart" in window ? "touchstart" : "onclick";
document.getElementById("volume1").addEventListener(event, () => play());

In JavaScript ontouchstart будет в объекте окна при использовании устройства с сенсорным экраном, с помощью которого вы можете прослушивать правильное событие.