Develop Reference

HTML and Javascript audio playlist able to jump tracks via smartphone controls

I'm creating an HTML audio playlist, everything runs fine, except that I would like the user to be able to jump tracks using smartphones controls (as if he were listening to Spotify), but with this html playlist the use cant jump from tracks via the smartphone controls, instead he can only foward or backward 10secs (as showed in the picture below).
Phone control
Is there anyway to make a html + js playlist that a user can jump tracks from the smartphone control?
Here is the code I am using if its important:
Code
<div class="container">
<div class="large-toggle-btn">
<i class="large-play-btn"><span class="screen-reader-text">Large toggle button</span></i>
</div>
<!-- /.play-box -->
<div class="info-box">
<div class="track-info-box">
<div class="track-title-text"></div>
<div class="audio-time">
<span class="current-time">00:00</span> /
<span class="duration">00:00</span>
</div>
</div>
<!-- /.info-box -->
<div class="progress-box">
<div class="progress-cell">
<div class="progress">
<div class="progress-buffer"></div>
<div class="progress-indicator"></div>
</div>
</div>
</div>
</div>
<!-- /.progress-box -->
<div class="controls-box">
<i class="previous-track-btn disabled"><span class="screen-reader-text">Previous track button</span></i>
<i class="next-track-btn"><span class="screen-reader-text">Next track button</span></i>
</div>
<!-- /.controls-box -->
<div class="play-list-row" data-track-row="1">
<div class="small-toggle-btn">
<i class="small-play-btn"><span class="screen-reader-text">Small toggle button</span></i>
</div>
<div class="track-number">
1.
</div>
<div class="track-title">
<a class="playlist-track" href="#" data-play-track="1">Calexico - Across The Wire</a>
</div>
</div>
<div class="play-list-row" data-track-row="2">
<div class="small-toggle-btn">
<i class="small-play-btn"><span class="screen-reader-text">Small toggle button</span></i>
</div>

This can be achieved with the Media Session API.
Open this demo from a smartphone: https://batman.dev/static/70677190/
<title>Testing</title>
<meta name="viewport" content="width=device-width">
<audio controls />
<script>
const audio = document.querySelector('audio')
const tracks = [
'https://opus-bitrates.anthum.com/audio/hyper/music-96.opus',
'https://opus-bitrates.anthum.com/audio/music-96.opus',
]
let trackIdx = 0
audio.src = tracks[trackIdx]
navigator.mediaSession.setActionHandler('previoustrack', prev)
navigator.mediaSession.setActionHandler('nexttrack', next)
function prev() {
trackIdx--
playAudio()
}
function next() {
trackIdx++
playAudio()
}
function playAudio() {
audio.src = tracks[Math.abs(trackIdx % tracks.length)]
audio.play()
navigator.mediaSession.playbackState = 'playing'
}
</script>

playPause is not defined (Not Play the Video)

In order to make video play when someone clicks on the play button, the button must become the pause icon to show that you can play and pause. Right now, the video does not play when I click on the play button. There is an error message that says playPause is not defined.
ERROR
1(index):131 Uncaught ReferenceError: playPause is not defined at HTMLButtonElement.onclick
HTML JS
jQuery(document).ready(function($){
var ppbutton = document.getElementById("vidbutton");
ppbutton.addEventListener("click", playPause);
myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused) {
myVideo.play();
ppbutton.innerHTML = "Pause";
}
else {
myVideo.pause();
ppbutton.innerHTML = "Play";
}
}
});
<div class="hero">
<div class="container">
<div class="wrapper">
<div class="row">
<div class="video">
<video height="369px" width="610px" muted id="video1" poster="assets/img/photo.jpg">
<source src="/assets/video/bjp__video.mp4" type="video/mp4">
<source src="/assets/video/bjp__video.webm" type="video/webm">
</video>
<div class="name">
<img alt="name" src="assets/img/bjp_title.png">
</div>
</div>
<div class="info__hero__content">
<p>I help  <span><b>people with disabilities</b></span> and <span><b>entrepreneurs</b></span> to find their hide abilities and resources for their businesses.</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="play__btn">
<button id="vidbutton" onclick="playPause()">
<img alt="play button" src="/assets/img/play__button.svg">
</button>
</div>
<div class="line"></div>
</div>

Try removing the onclick event from the button itself. That is what is causing the error.
jQuery(document).ready(function($){
var ppbutton = document.getElementById("vidbutton");
ppbutton.addEventListener("click", playPause);
myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused) {
myVideo.play();
ppbutton.innerHTML = "Pause";
}
else {
myVideo.pause();
ppbutton.innerHTML = "Play";
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero">
<div class="container">
<div class="wrapper">
<div class="row">
<div class="video">
<video height="169px" width="410px" id="video1" poster="https://ourtube.co.uk/upload/photos/2021/11/928b8656defe100bf7c75815db0edf992b1e33d2wK9QTHR7ny9ahCHqPYKf.video_thumb_5245_11.jpeg">
<source src="https://ourtube.co.uk/watch/TMaamxje77GKe9q" type="video/mp4">
</video>
<div class="name">
<img alt="name" src="assets/img/bjp_title.png">
</div>
</div>
<div class="info__hero__content">
<p>I help  <span><b>people with disabilities</b></span> and <span><b>entrepreneurs</b></span> to find their hide abilities and resources for their businesses.</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="play__btn">
<button id="vidbutton">
<img alt="play button" src="https://brandnewtube.com/themes/youplay/img/icon.png"> Play
</button>
</div>
<div class="line"></div>
</div>

Why won't my button play my sound and go to the link?

This looks like a basic problem but failed to find the answer.. Is there anything I need to add for the button to bring a user to the home page and play the sound? At the moment it only plays the sound. I want it to play the sound immediately then go to the homepage.
function playBeep() {
var sound = document.getElementById("Sound")
sound.play()
}
<div class="animatedButton">
<audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<button id="aButton" onclick="playBeep()">
<img src="img/Home.png">
</button>
</div>

You should wait until the <audio> element is done playing, then tell the browser to navigate to a new page:
function playBeep() {
var sound = document.getElementById("Sound");
sound.play();
sound.addEventListener('ended', function () {
location.href = 'Home.html';
});
}
<div class="animatedButton">
<audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<button id="aButton" onclick="playBeep()">
<img src="img/Home.png">
</button>
</div>

just need to add your link window.location = "http://stackoverflow.com";
function playBeep() {
var sound = document.getElementById("Sound")
sound.play();
window.location = "http://stackoverflow.com";
}
<div class="animatedButton">
<audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<button id="aButton" onclick="playBeep()">
<img src="img/Home.png">
</button>
</div>

function playBeep() {
var sound = document.getElementById("Sound")
sound.play();
window.location.href = '/'; //Go to HomePage
}
<div class="animatedButton">
<audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<button id="aButton" onclick="playBeep()">
<img src="img/Home.png">
</button>
</div>

Your button is not in the <a>tag
Maybe this will work :
<a href="Home.html">
<button id="aButton" onclick="playBeep()">
<img src="img/Home.png">
</button>
</a>

Your problem is the closing tag of a.
the tag "a" has to wrap the whole button.
<a href="Home.html">
<button id="aButton" onclick="playBeep()">
<img src="img/Home.png">
</button>
</a>

You could always use jQuery to listen for the sound to end and redirect the user.
/* Bind Ended Event to Sound */
$('#Sound').on('ended', function(){
console.log('User Redirected');
});
/* Bind Click Event to Button */
$('#aButton').on('click', function() {
$('#Sound')[0].play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animatedButton">
<audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<button id="aButton">
<img src="http://findicons.com/files/icons/1580/devine_icons_part_2/128/home.png">
</button>
</div>
Or you could use just JavaScript to listen for the sound to end and redirect the user.
/* Variable Defaults */
var sound = document.getElementById('Sound');
var button = document.getElementById('aButton');
/* Bind Ended Event to Sound */
sound.addEventListener('ended', function(){
console.log('User Redirected');
});
/* Bind Click Event to Button */
button.addEventListener('click', function() {
sound.play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animatedButton">
<audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
<button id="aButton">
<img src="http://findicons.com/files/icons/1580/devine_icons_part_2/128/home.png">
</button>
</div>

How can I prevent an audio player to pause when a second player starts playing?

I'm building an app using AngularJS, and I'm using the soundcloud API to stream sounds through two different players.
My problem is that I want to have both the players to play sound simultaneously, which is not happening at the moment.
angular
.module('mtcApp')
.controller('PlayerCtrl', PlayerCtrl);
PlayerCtrl.$inject = ['$scope'];
function PlayerCtrl($scope){
$scope.startPlayerA = function(track){
const id = track.id;
console.log(id);
SC
.stream(`/tracks/${id}`)
.then(function(player){
$('#playA').on('click', function(){
player.play();
});
$('#pauseA').on('click', function(){
player.pause();
console.log(player);
});
});
};
$scope.startPlayerB = function(track){
const id = track.id;
console.log(id);
SC
.stream(`/tracks/${id}`)
.then(function(player){
$('#playB').on('click', function(){
player.play();
});
$('#pauseB').on('click', function(){
player.pause();
});
});
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="" ng-controller="MainCtrl">
<div class="">
<div class="">
<div ng-controller="PlayerCtrl as vm">
<div class="fl w-50 mv3 bg-grey">
<h3>Deck A</h3>
<button id="playA"> **PLAY** </button>
<button id="pauseA">**STOP**</button>
</div>
<div class="fl w-50 mv3 bg-grey">
<h3>Deck B</h3>
<button id="playB"> **PLAY** </button>
<button id="pauseB">**STOP**</button>
</div>
<sc-search></sc-search>
</div>
</div>
</div>
</div>
What is happening now is that if $scope.startPlayerA.player is playing and $(#playB) is clicked, $scope.startPlayerB.player starts playing but $scope.startPlayerA.player stops, anyone has an idea of how i can prevent this from happening?
thanks

How to remove zoom effect of tile(metro ui css) using javascript

I have created a tile(metro ui css) and the tile does following:
On click a video is played.
The slide right effect is not displayed(on click).
I cannot remove the zoom effect of the tile.I have tried removing tile class,but it is not working.Please help me to remove the zooming effect after the tile is clicked.Here is the code.
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tile" id="vii">
<div class="tile-content slide-right" >
<div class="slide slide1">
<video id="myvideo" controls muted>
<source src="1.mp4" type="video/mp4" />
</video>
</div>
<div class="slide-over slide-over1" id="viii">
Attack by Smit
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript
var myvideo = document.getElementById("myvideo");
var myaudio = document.getElementById("myaudio");
document.getElementById("vii").onclick=function(){
myvideo.play();
myvideo.style.display="block";
myvideo.style.width="600px";
myvideo.style.height="300px";
document.getElementById("viii").style.display="none";
}
Here is code snippet:
http://jsbin.com/tujakasuci/1/edit?html,output
Thank You!!

You should OnClick, remove slide-right Class. The zoom effect come from this class:
document.getElementById("vii").onclick=function(){
$('.tile-content').removeClass("slide-right");
myvideo.play();
myvideo.style.display="block";
myvideo.style.width="600px";
myvideo.style.height="300px";
document.getElementById("viii").style.display="none";
}