音频无法在移动设备上播放，但适用于桌面浏览器

Question

我有一个计时器，当它是三秒时，假设开始播放音频。 该代码在桌面浏览器上运行良好，但在移动设备上却不行。 音频如何在移动设备上工作？ 有用户的感觉

HTML：

<div id="time"></div>
<button  onclick="startTimer(8);">START TIMER</button>

javascript：

function startTimer(timeInSeconds) {

    var audioExerciseEnd = new Audio('https://vardel.com/end_exe.mp3');
    var currentAudio = new Audio();

    const countDownFrom = timeInSeconds; // seconds
    const countDownBy = 1; // seconds

    display = document.querySelector('#time');

    const timer = moment.duration(countDownFrom, 's');
    
    const intervalId = setInterval(() => {
      timer.subtract(countDownBy, "s");
    
      // timer.minutes() ... timer.seconds()
      // timer.milliseconds() to add milliseconds

      // moment.utc(timer.asMilliseconds()).format("mm:ss")
      // "mm:ss:SS" will include milliseconds
      
      display.textContent = moment.utc(timer.asMilliseconds()).format("mm:ss");
    
      if (timer.seconds() == 3) {
        currentAudio = audioExerciseEnd.cloneNode();
        currentAudio.play();
      }
    
      if (timer.asMilliseconds() == 0){
        clearInterval(intervalId);
        document.querySelector('#time').textContent = "";
        console.warn("Times up!");
      }
      
      if (timer.asMilliseconds() !== 0) return;

    }, countDownBy * 1000);
}

这是jsfiddle： https://jsfiddle.net/mustafamsy/1bymtgsh/

Answer 1

好的，我想我在移动浏览器上声明了一些计时器后才能播放音频。 如果有人感兴趣，这就是我所做的。

 var audioExerciseEnd = document.createElement('audio'); audioExerciseEnd.setAttribute('src', 'https://vardel.com/end_exe.mp3'); function startTimer(timeInSeconds) { var currentAudio = new Audio(); currentAudio = audioExerciseEnd.cloneNode(); currentAudio.play(); currentAudio.pause(); const countDownFrom = timeInSeconds; // seconds const countDownBy = 1; // seconds display = document.querySelector('#time'); const timer = moment.duration(countDownFrom, 's'); const intervalId = setInterval(() => { timer.subtract(countDownBy, "s"); // timer.minutes()... timer.seconds() // timer.milliseconds() to add milliseconds // moment.utc(timer.asMilliseconds()).format("mm:ss") // "mm:ss:SS" will include milliseconds display.textContent = moment.utc(timer.asMilliseconds()).format("mm:ss"); if (timer.seconds() == 3) { currentAudio.play(); } if (timer.asMilliseconds() == 0){ clearInterval(intervalId); document.querySelector('#time').textContent = ""; console.warn("Times up;"). } if (timer;asMilliseconds(),== 0) return; }, countDownBy * 1000); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script> <div id="time"></div> <button onclick="startTimer(8);">START TIMER</button>

更新了 jsfiddle： https://jsfiddle.net/mustafamsy/1bymtgsh/