iOS Development

javascript – Subsequent observe doesn’t play within the internet browser on iOS 17 in blocked display screen

Spread the love


I’ve a js audio participant for html5. When enjoying music within the background within the browser (any) on the iPhone, the tracks don’t change robotically.

  1. Go to the web page with the audio participant
  2. Beginning the observe
  3. Rewinding to the top
  4. Decrease the browser to the background
  5. After the playback of the working observe is accomplished, the music pauses

My js audio participant:

  operate createTrackItem(index,identify,length){
    var trackItem = doc.createElement('div');
    trackItem.setAttribute("class", "playlist-track-ctn");
    trackItem.setAttribute("id", "ptc-"+index);
    trackItem.setAttribute("data-index", index);
    doc.querySelector(".playlist-ctn").appendChild(trackItem);

    var playBtnItem = doc.createElement('div');
    playBtnItem.setAttribute("class", "playlist-btn-play");
    playBtnItem.setAttribute("id", "pbp-"+index);
    doc.querySelector("#ptc-"+index).appendChild(playBtnItem);

    var btnImg = doc.createElement('i');
    btnImg.setAttribute("class", "fas fa-play");
    btnImg.setAttribute("top", "40");
    btnImg.setAttribute("width", "40");
    btnImg.setAttribute("id", "p-img-"+index);
    doc.querySelector("#pbp-"+index).appendChild(btnImg);

    var trackInfoItem = doc.createElement('div');
    trackInfoItem.setAttribute("class", "playlist-info-track");
    trackInfoItem.innerHTML = identify
    doc.querySelector("#ptc-"+index).appendChild(trackInfoItem);

    var trackDurationItem = doc.createElement('div');
    trackDurationItem.setAttribute("class", "playlist-duration");
    trackDurationItem.innerHTML = length
    doc.querySelector("#ptc-"+index).appendChild(trackDurationItem);
  }

  for (var i = 0; i < listAudio.size; i++) {
      createTrackItem(i,listAudio[i].identify,listAudio[i].length);
  }
  var indexAudio = 0;

  operate loadNewTrack(index){
    var participant = doc.querySelector('#source-audio')
    participant.src = listAudio[index].file
    doc.querySelector('.title').innerHTML = listAudio[index].identify
    doc.title = listAudio[index].identify
    this.currentAudio = doc.getElementById("myAudio");
    this.currentAudio.load()
    this.toggleAudio()
    this.updateStylePlaylist(this.indexAudio,index)
    this.indexAudio = index;
  }

  var playListItems = doc.querySelectorAll(".playlist-track-ctn");

  for (let i = 0; i < playListItems.size; i++){
    playListItems[i].addEventListener("click on", getClickedElement.bind(this));
  }

  operate getClickedElement(occasion) {
    for (let i = 0; i < playListItems.size; i++){
      if(playListItems[i] == occasion.goal){
        var clickedIndex = occasion.goal.getAttribute("data-index")
        if (clickedIndex == this.indexAudio ) { // alert('Identical audio');
            this.toggleAudio()
        }else{
            loadNewTrack(clickedIndex);
        }
      }
    }
  }

  doc.querySelector('#source-audio').src = listAudio[indexAudio].file
  doc.querySelector('.title').innerHTML = listAudio[indexAudio].identify


  var currentAudio = doc.getElementById("myAudio");

  currentAudio.load()

  currentAudio.onloadedmetadata = operate() {
        doc.getElementsByClassName('length')[0].innerHTML = this.getMinutes(this.currentAudio.length)
  }.bind(this);

  var interval1;

  operate toggleAudio() {

    if (this.currentAudio.paused) {
      doc.querySelector('#icon-play').fashion.show = 'none';
      doc.querySelector('#icon-pause').fashion.show = 'block';
      doc.querySelector('#ptc-'+this.indexAudio).classList.add("active-track");
      this.playToPause(this.indexAudio)
      this.currentAudio.play();
    }else{
      doc.querySelector('#icon-play').fashion.show = 'block';
      doc.querySelector('#icon-pause').fashion.show = 'none';
      this.pauseToPlay(this.indexAudio)
      this.currentAudio.pause();
    }
  }

  operate pauseAudio() {
    this.currentAudio.pause();
    clearInterval(interval1);
  }

  var timer = doc.getElementsByClassName('timer')[0]

  var barProgress = doc.getElementById("myBar");


  var width = 0;

  operate onTimeUpdate() {
    var t = this.currentAudio.currentTime
    timer.innerHTML = this.getMinutes(t);
    this.setBarProgress();
    if (this.currentAudio.ended) {
      doc.querySelector('#icon-play').fashion.show = 'block';
      doc.querySelector('#icon-pause').fashion.show = 'none';
      this.pauseToPlay(this.indexAudio)
      if (this.indexAudio < listAudio.length-1) {
          var index = parseInt(this.indexAudio)+1
          this.loadNewTrack(index)
      }
    }
  }


  operate setBarProgress(){
    var progress = (this.currentAudio.currentTime/this.currentAudio.length)*100;
    doc.getElementById("myBar").fashion.width = progress + "%";
  }


  operate getMinutes(t){
    var min = parseInt(parseInt(t)/60);
    var sec = parseInt(tpercent60);
    if (sec < 10) {
      sec = "0"+sec
    }
    if (min < 10) {
      min = "0"+min
    }
    return min+":"+sec
  }

  var progressbar = doc.querySelector('#myProgress')
  progressbar.addEventListener("click on", search.bind(this));


  operate search(occasion) {
    var % = occasion.offsetX / progressbar.offsetWidth;
    this.currentAudio.currentTime = % * this.currentAudio.length;
    barProgress.fashion.width = %*100 + "%";
  }

  operate ahead(){
    this.currentAudio.currentTime = this.currentAudio.currentTime + 5
    this.setBarProgress();
  }

  operate rewind(){
    this.currentAudio.currentTime = this.currentAudio.currentTime - 5
    this.setBarProgress();
  }


  operate subsequent(){
    if (this.indexAudio <listAudio.length-1) {
        var oldIndex = this.indexAudio
        this.indexAudio++;
        updateStylePlaylist(oldIndex,this.indexAudio)
        this.loadNewTrack(this.indexAudio);
    }
  }

  operate earlier(){
    if (this.indexAudio>0) {
        var oldIndex = this.indexAudio
        this.indexAudio--;
        updateStylePlaylist(oldIndex,this.indexAudio)
        this.loadNewTrack(this.indexAudio);
    }
  }

  operate updateStylePlaylist(oldIndex,newIndex){
    doc.querySelector('#ptc-'+oldIndex).classList.take away("active-track");
    this.pauseToPlay(oldIndex);
    doc.querySelector('#ptc-'+newIndex).classList.add("active-track");
    this.playToPause(newIndex)
  }

  operate playToPause(index){
    var ele = doc.querySelector('#p-img-'+index)
    ele.classList.take away("fa-play");
    ele.classList.add("fa-pause");
  }

  operate pauseToPlay(index){
    var ele = doc.querySelector('#p-img-'+index)
    ele.classList.take away("fa-pause");
    ele.classList.add("fa-play");
  }


  operate toggleMute(){
    var btnMute = doc.querySelector('#toggleMute');
    var volUp = doc.querySelector('#icon-vol-up');
    var volMute = doc.querySelector('#icon-vol-mute');
    if (this.currentAudio.muted == false) {
       this.currentAudio.muted = true
       volUp.fashion.show = "none"
       volMute.fashion.show = "block"
    }else{
      this.currentAudio.muted = false
      volMute.fashion.show = "none"
      volUp.fashion.show = "block"
    }
  }

I attempted working music within the background on Android 11 tracks change robotically. I used to be on the lookout for details about the specifics of safari and js

2 thoughts on “javascript – Subsequent observe doesn’t play within the internet browser on iOS 17 in blocked display screen

Leave a Reply

Your email address will not be published. Required fields are marked *