时间戳

首页 > 解决方案 > 音频无法在移动设备上播放，但适用于桌面浏览器

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

问题描述

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

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/

标签： javascriptaudiotimer

解决方案

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

    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/

推荐阅读