Audio fix for mobile quizegame for BWT

app.js

...
F7.onPageInit('question', function(page) {
  if (page.context.audio) {
    document.getElementById('main-audio').className = 'question-audio';
    game.playSound(page.context.audio);
  };
});
...

game.js

var silent = 'data:audio/wav;base64,UklGRjIAAABXQVZFZm10IBIAAAABAAEAQB8AAEAfAAABAAgAAABmYWN0BAAAAAAAAABkYXRhAAAAAA==';
var audio = new Audio(silent);

audio.addEventListener('ended', function(event) {
  if ($$('#main-audio').hasClass('question-audio')) {
    $$('.page.page-on-center').removeClass('audio-playing');
    game.client.playerListenedAudio();
  };
});

audio.addEventListener('play', function(event) {
  if ($$('#main-audio').hasClass('question-audio')) {
    setTimeout(function() {
      $$('.page.page-on-center').addClass('audio-playing');
    }, 1000);
  };
});

// _

var game = {

  playSound: function(data) {

    var src = data || null
    var el = $(audio)[0];
    el.src = src || silent;
    el.play();

    return el;
  },

  audiopalayer: audio,

  socketId: null,

  /**
   * ready        - once after init
   * searching    - search opponent
   * found        - opponent was found
   * starting     - preparing to start: grab questions from API
   * round        - display round screen
   * question     - show question screen
   * hint         - when player click to the hint button
   * results      - game over. Display results screen
   */
  status: 'ready',

  user: {},

  opponent: {},

  countdown: {
    total: 8,
    current: 8,
    pause: false,
    interval: null
  },

  currentQuestionAnswered: false,

  questions: [],

  /**
   * Events incomming for server
   */
  events: {

    foundOpponent: function(opponent) {
      game.status = 'found';
      game.opponent = opponent;

      refreshPage('start', {
        status: game.status,
        opponent: opponent
      });
    },

    round: {
      showLocation: function(round) {
        F7.hidePreloader();
        game.status = 'round';

        round.number++;
        page('round', {
          round: round
        });
      },

      showQuestion: function(data) {
        game.status = 'question';
        game.user.scores = game.getUserScores(data);
        game.opponent.scores = game.getOpponentScores(data);

        page('question', {
          hideNavbar: true,
          question: data.question,
          player: game.user,
          opponent: game.opponent,
          audio: media.getAudioUrl(data),
          image1: media.getImageUrl(data, 0),
          image2: media.getImageUrl(data, 1),
          image3: media.getImageUrl(data, 2)
        });

        $$(".round-steps .round-current").html(data.round + 1);
        $$(".round-steps .round-total").html(data.countRounds);
      },

      showFirstImage: function() {
        $$(".page-on-center[data-page='question'] .content-block").addClass('hidden');
        $$(".page-on-center[data-page='question'] .navbar-inner").addClass('hidden');
        $$(".page-on-center[data-page='question'] .page-content").removeClass('blur');
      },

      startTimer: function() {
        game.currentQuestionAnswered = false;

        $$(".view-main[data-page='question']").addClass('start-timer');
        $$("[data-page='question'] .hidden").removeClass('hidden');
        $$("[data-page='question'] .page-content").addClass('blur');

        /**
         * Start game
         */
        game.startCountdown();
      },

      complete: function(data) {
        clearInterval(game.countdown.interval);

        var currentPage = $$(".page-on-center[data-page='question']");
        currentPage
          .removeClass('start-timer')
          .addClass('round-complete');

        if ($$("audio")[0] && !_.isUndefined($$("audio")[0].pause)) {
          $$("audio")[0].pause();
        }

        // Update Arrows
        _.each(data.results, function(item) {
          if (item.correct) {
            $$('.answer-' + item.answer).addClass('green-arrow');
          } else {
            $$('.answer-' + item.answer).addClass('red-arrow');
          }
        });

        // Update Scores
        _.each(data.results, function(value, key) {
          var scores = parseInt($$('.user-points.user-' + key).html());
          $$('.user-points.user-' + key).html(scores + value.scores);
        });
      },

      showImagesAfterComplete: function() {

        // first image
        $$(".page-on-center[data-page='question'] .content-block").addClass('hidden');
        $$(".page-on-center[data-page='question'] .navbar-inner").addClass('hidden');
        $$(".page-on-center[data-page='question'] .page-content").removeClass('blur');

        console.log('first image');

        setTimeout(function() {
          // second image
          $$(".page-on-center[data-page='question'] .second-image").css('display', 'block');
          setTimeout(function() {
            $$(".page-on-center[data-page='question'] .second-image").css('opacity', '1');
          }, 100);

          console.log('second image');

          setTimeout(function() {
            // third image
            $$(".page-on-center[data-page='question'] .third-image").css('display', 'block');
            setTimeout(function() {
              $$(".page-on-center[data-page='question'] .third-image").css('opacity', '1');
            }, 100);

            console.log('third image');

            setTimeout(function() {
              // go to next round
              console.log('ready to next round');

              //game.client.readyToNextRound();

            }, 3000);
          }, 1500);

        }, 500);
      },

      showFirstImageAfterComplete: function() {
        console.log('showFirstImageAfterComplete');
        $$(".page-on-center[data-page='question'] .content-block").addClass('hidden');
        $$(".page-on-center[data-page='question'] .navbar-inner").addClass('hidden');
        $$(".page-on-center[data-page='question'] .page-content").removeClass('blur');
      },

      showSecondImageAfterComplete: function(data) {
        console.log('showSecondImageAfterComplete');
        $$(".page-on-center[data-page='question'] .second-image").css('display', 'block');
        setTimeout(function() {
          $$(".page-on-center[data-page='question'] .second-image").css('opacity', '1');
        }, 100);
      },

      showThirdImageAfterComplete: function(data) {
        console.log('showThirdImageAfterComplete');
        $$(".page-on-center[data-page='question'] .third-image").css('display', 'block');
        setTimeout(function() {
          $$(".page-on-center[data-page='question'] .third-image").css('opacity', '1');
        }, 100);
      }
    },

    opponentAnswered: function(data) {
      //@TODO: Implement thorugh Template7 instead of Dom7
      //refreshPage('start', { opponentAnswer: data.answer });
      $$('.question-answer').removeClass('opponents-answer');
      $$('.question-answer[data-answer-id="' + data.answer.id + '"]')
        .addClass('opponents-answer')
        .addClass('right-arrow');
    },

    showResults: function(data) {
      var winner = false;

      game.status = 'results';
      game.user.scores = game.getUserScores(data);
      game.opponent.scores = game.getOpponentScores(data);

      if (data.winner.pid == game.user.id) {
        winner = true;
      }

      page('results', {
        player: game.user,
        opponent: game.opponent,
        winner: winner
      });

      //reset audio tag
      //resetAudioTag();
    },

    /**
     * Show alert and restart game
     * @param reason
     */
    restartGame: function(reason) {
      game.client.leaveRoom();

      F7.alert(reason, 'Game Over', function() {
        //go to start page
        game.status = 'ready';
        page('start', {
          user: game.user,
          status: game.status
        }, false);
      });
    },

    disconnected: function() {
      F7.showPreloader('Server disconnected!');
      setTimeout(function() {
        window.location.reload();
      }, 3000);
    },

    error: function(data) {
      F7.alert(data.error, 'Server error');

      //go to start page
      game.status = 'ready';
      page('start', {
        user: game.user,
        status: game.status
      }, false);

      game.client.leaveRoom();
      //window.location.reload();
    }
  },

  /**
   * Client's actions
   */
  client: {
    setPlayer: function(user) {

      game.user = user;
      IO.socket.emit('setPlayer', game.user);
    },

    searchOpponent: function() {
      console.log('game.client: searchOpponent', game.user)
      IO.socket.emit('playerStartSearch', game.user);

      game.status = 'searching';
      refreshPage('start', {
        status: game.status
      });
    },

    cancelSearch: function() {
      IO.socket.emit('playerCancelSearch', game.user);

      game.status = 'ready';
      refreshPage('start', {
        status: game.status
      });
    },

    playerListenedAudio: function() {
      IO.socket.emit('playerListenedAudio');
    },

    sendAnswer: function(answer) {
      game.currentQuestionAnswered = true;

      //$$(".view-main[data-page='question']").removeClass('start-timer');
      //clearInterval(game.countdown.interval);

      IO.socket.emit('playerAnswer', {
        id: answer,
        second: (game.countdown.total - game.countdown.current)
      });

      $$('.question-answer')
        .addClass('btn-disabled')
        .removeClass('my-answer');
      $$('.question-answer[data-answer-id="' + answer + '"]')
        .addClass('my-answer')
        .addClass('left-arrow');
    },

    readyToNextRound: function() {
      IO.socket.emit('playerReadyToNext');
    },

    leaveRoom: function() {
      setTimeout(function() {
        F7.hidePreloader()
      }, 1000);
      IO.socket.emit('leaveRoom', {});
    }
  },

  /**
   *
   */
  startCountdown: function() {
    // reset
    clearInterval(game.countdown.interval);
    game.countdown.current = $config.totalRoundSeconds;

    game.countdown.interval = setInterval(function() {
      if (!game.countdown.pause) {
        game.countdown.current--;
        //refresh template
        $$('.seconds-timer').html(game.countdown.current);

        if (game.countdown.current < 1) {
          clearInterval(game.countdown.interval);
          game.countdown.current = $config.totalRoundSeconds;

          if (game.currentQuestionAnswered === false) {
            game.client.sendAnswer(0);
          }
        }
      }
    }, 1000);
  },

  //server event - waiting for opponent answer, when he used hint
  waitOpponent: function() {

  },

  getUserScores: function(data) {
    var userScores = _.findWhere(data.scores, {
      pid: game.user.id
    });

    if (_.isUndefined(userScores)) {
      return 0;
    } else {
      return userScores.scores;
    }
  },

  getOpponentScores: function(data) {
    var opponentScores = _.findWhere(data.scores, {
      pid: game.opponent.id
    });

    if (_.isUndefined(opponentScores)) {
      return 0;
    } else {
      return opponentScores.scores;
    }
  }
};

index.html

...
{{#js_compare "this.status == 'ready'"}}
<div class="start-block">
  <div class="table-row">
    <div class="table-cell">
      <a id="start-searching" href="#" onclick="game.audiopalayer.play()" class="button button-big">Start</a>
    </div>
  </div>
</div>
{{/js_compare}}
...