I have a jPlayer streaming a radio channel and I'd like to trigger the audio from a text link, besides the "Play" button. Eg: "Let's play some music", where play some music triggers the action of the jPlayer "Play" button.
Here's my HTML markup
<p>Let's play some music</p> <!-- This line will trigger the play button -->
<!-- START JPLAYER -->
<div id="startpage_jplayer" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio-stream">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
<div class="jp-info-bar">
</div>
</div>
<!-- END JPLAYER -->
and this is the JavaScript code
$(function(){
var stream = {
title: "",
mp3: "http://localhost:8000/blurfm"
},
ready = false,
eurlattempts = 0;
$("#startpage_jplayer").jPlayer({
ready: function (event) {
ready = true;
$(this).jPlayer("setMedia", stream);
//$.dbg('ready');
},
playing: function(event) {
eurlattempts = 0;
$('#jp_container_1 .jp-info-bar').text('');
},
pause: function() {
$(this).jPlayer("clearMedia");
$(this).jPlayer("setMedia", stream);
//$.dbg('pause');
},
error: function(event) {
if (ready && event.jPlayer.error.type == $.jPlayer.error.URL && eurlattempts<5) {
var self = this;
eurlattempts++;
setTimeout(function(){
$(self).jPlayer("setMedia", stream).jPlayer("play");
},1000);
} else if (ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", stream).jPlayer("play");
} else {
eurlattempts = 0;
$('#jp_container_1 .jp-info-bar').text('Error: '+event.jPlayer.error.message+' '+event.jPlayer.error.hint+' ('+event.jPlayer.error.type+' context '+event.jPlayer.error.context+')' + ( event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET ? 'Y':'N') );
}
},
//solution: "flash,html",
swfPath: "/demo/",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
});
Thanks in advance!
OK, so try this:
You have to add an id attribute to your <a> element first:
<p>Let's play some music</p>
id can be anything, I just named it 'playSomeMusic' for test
then in your javascript add an click event for the <a> element and call the play method for jPlayer like this:
$("#playSomeMusic").click(function(){
$("#startpage_jplayer").jPlayer("play");
});
that's it. this code should work fine. please give it a try and update us on the result
Related
I've setup a play/pause video button in javascript, that was working, but now doesn't and I don't know why. It now only fires once, pausing but not playing.
Basically, the "if" part of my playButton function works correctly, but the "else" part doesn't seem to function correctly. It did previously, so I imagine there's just a missing element somewhere. I have even checked it in a code validator and it passes. What to do?
Please, see my code below...
window.onload = function() {
const video = document.getElementById('intro-video');
const playPause = document.getElementById('play-button');
const enlarge = document.getElementById('full-screen');
const progressBar = document.getElementById('progress-bar');
playPause.addEventListener('click', function playButton() {
if (video.play) {
video.pause()
playPause.innerHTML = 'Play Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Play.svg)'
} else {
video.play()
playPause.innerHTML = 'Pause Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Pause.svg)'
}
});
enlarge.addEventListener('click', function enlarge() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
progressBar.addEventListener('change', function progressBar() {
const time = video.duration * (progressBar.value / 100);
video.currentTime = time;
});
video.addEventListener('timeupdate', function progressTime() {
const value = (100 / video.duration) * video.currentTime;
progressBar.value = value;
});
progressBar.addEventListener('mousedown', function progressPause() {
video.pause();
});
progressBar.addEventListener('mouseup', function progressPlay() {
video.play();
});
};
<!doctype html>
<html lang='en-ZA'>
<head>
<meta charset='UTF-8'>
<title>Alcôve – Discover Opulence</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com'>
<link rel='fonts' href='https://fonts.googleapis.com/css2?family=Work+Sans:wght#400;500;600;700&display=swap'>
<link rel='stylesheet' href='Style.css'>
<script rel='javascript' src='Controls.js'></script>
</head>
<body>
<div id='container'>
<div id='top' class='section dark'>
<div id='row1' class='row'>
<div id='main-menu'>
<ul>
<li><a href='https://alcove.bensmiles.com'>About Us</a></li>
<li><a href='https://alcove.bensmiles.com/committee'>Executive Committee</a></li>
<li><a href='https://alcove.bensmiles.com/news'>The Opulent News</a></li>
<li><a href='https://alcove.bensmiles.com/foundation'>Foundation</a></li>
<li><a href='https://alcove.bensmiles.com/contact'>Contact</a></li>
</ul>
</div>
<div class='column left'>
<div id='logo'>
<img src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Logo.svg'>
</div>
<div id='header-headline'>
<p>Alcôve Holdings</p>
<h1>Discover<br>Opulence</h1>
</div>
</div>
<div class='column right'>
<div id='menu-block'>
<img id='header-image' src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Header.png'>
<div id='header-copy'>
<p>Alcôve finds satisfaction in establishing an atmosphere where excellence is celebrated, and confidence is originated. We inspire the youth to lead with precision and passion by igniting their desire to discover opulence through Alcôve.</p>
</div>
<div id='video-console'>
<div id='video-player'>
<video autoplay muted id='intro-video'poster='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Poster.png' width='214px' height='120px'>
<source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.mp4' type='video/mp4'>
<source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.ogv' type='video/ogv'>
<source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.webm' type='video/webm'>
</video>
<div id='video-details'>
<button id='full-screen' type='button'><img src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Enlarge.svg'></button>
<div id='video-headline'>
<p>Headline of the video playing</p>
</div>
</div>
</div>
<div id='video-controls'>
<button id='play-button' type='button'>Pause Video</button>
<input id='progress-bar' type='range' value='0'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
video.play references the play method of video. In Javascript, every non-null (non-zero, etc respectively) counts as true. Because the play method exists, it will never go to the else part. Instead, use if (!video.paused).
Just one more thing: decide whether to use semicolons or to not. If you use both styles, it makes the code a bit weird.
Try this:
playPause.addEventListener('click', function playButton() {
if (video.paused || video.ended) {
video.play()
playPause.innerHTML = 'Pause Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Pause.svg)'
} else {
video.pause()
playPause.innerHTML = 'Play Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Play.svg)'
}
});
I have to add a slide to my project with pause and play functions.I cannot find any code for pause and play functionality. Why it is not working.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="../responsiveslides.min.js"></script>
<script>
var forcePause = false;
// You can also use "$(window).load(function() {"
$(function () {
restartCycle = function () {
if (settings.auto) {
// Stop
clearInterval(rotate);
if (!forcePause) // new line
// Restart
startCycle();
}
};
$('.pause_slider').click(function (e) {
e.preventDefault();
forcePause = true;
$(this).hide()
$('.play_slider').show();
clearInterval(rotate);
});
$('.play_slider').click(function (e) {
e.preventDefault();
forcePause = false;
$(this).hide();
$('.pause_slider').show();
restartCycle();
});
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager: false,
pauseControls:true,
nav: true,
pause: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<a class="pause_slider" href="#">Pause Slider</a>
<a class="play_slider" href="#">Play Slider</a>
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<img src="images/1.jpg" alt="">
<p class="caption">This is a caption</p>
</li>
<li>
<img src="images/2.jpg" alt="">
<p class="caption">This is another caption</p>
</li>
<li>
<img src="images/3.jpg" alt="">
<p class="caption">The third caption</p>
</li>
</ul>
</div>
I want to have a start/stop option, to control if the slider is automatically switching between slides or paused, giving the user a bit more control.
Thanks,
I have jplayer working perfectly with PHP MYSQLi with audio tracks displaying, but challenge comes when I want to display the current playing file on top of the player with <div id="playlist"></div> but when applied using javascript, the whole playlist disappears, but when i remove the triggering code from the javascript, the playlist appears. Here is my code
Before current item playing - code (playlist shows, player working fine)
<script type="text/javascript">
$(document).ready(function () {
var cssSelector = { jPlayer: "#playlist_1", cssSelectorAncestor: "#playlist_container" };
var playlist = <?php echo $playlist;?>;
var options = { swfPath: "assets/jplayer/jquery.jplayer.swf", supplied: "<?php echo $supplied;?>", smoothPlayBar: true, autoPlay: true, keyEnabled: true, shuffleOnLoop: true, wmode: "window", free: Boolean, };
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
});
</script>
Playlist shows - Image
With current item playing - code(playlist disappears)
<script type="text/javascript">
$(document).ready(function () {
var cssSelector = { jPlayer: "#playlist_1", cssSelectorAncestor: "#playlist_container" };
var playlist = <?php echo $playlist;?>;
var options = { swfPath: "assets/jplayer/jquery.jplayer.swf", supplied: "<?php echo $supplied;?>", smoothPlayBar: true, autoPlay: true, keyEnabled: true, shuffleOnLoop: true, wmode: "window", free: Boolean, };
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
});
$("#playlist_1").on($.jPlayer.event.ready, function (event) {
var current = myPlaylist.current;
var playlist = myPlaylist.playlist;
$.each(playlist, function (index, obj) {
if (index == current) {
$("#playing").html("<span class='artist-name'>" + obj.artist + "</span>" + "<br>" + "<span class='track-name'>" + obj.title + "</span>");
}
});
});
</script>
Playlist disappears - Image
Output html
<div id="playlist_container" class="jp-audio">
<div id="jplayer"></div>
<div class="jp-content jp-type-playlist">
<div id="playlist_1" class="jp-jplayer"></div>
<div id="playing"></div>
<ul class="jp-controls">
<li><img class="img-responsive" src="images/player/3.png" alt="Image"></li>
<li><img class="img-responsive" src="images/player/5.png" alt="Image"></li>
</ul>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar">
<b></b>
</div>
</div>
</div>
<div class="jp-current-time"></div>
</div>
</div>
<div class="jp-playlist">
<ul>
<li> </li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
Anything am not doing
I am building a list of music, and each music has a play button. So when you click play the button turns to pause button.
So when you music plays i want to be able to go down the list and click on another song with the current song stopping and the one i clicked to start.
At the moment i can go down the list and its playing the song but not its not letting me pause . When i click pause it just starts the song again.
here is my code
window.player = document.getElementById('player');
$('ul.tracks li span.play').click(function(){
$('ul.tracks li span.play').find('i').removeClass().addClass('fi-play');
var trackid = $(this).attr('id');
var track;
if(trackid == 'play1'){
track = 'img/music.mp3';
} else if(trackid == 'play2'){
track = 'img/music2.mp3';
} else {
track = 'img/music3.mp3';
}
$('#player_track').attr('src', track);
player.load();
if (player.paused) {
player.play();
$(this).html('<i class="fi-pause"></i>');
} else {
player.pause();
player.empty();
$(this).html('<i class="fi-play"></i>');
}
});
And here is the html
<audio id="player">
<source id="player_track" src="img/music.mp3" />
</audio>
<ul class="tracks">
<li>
<div class="row">
<div class="large-8 columns">1. No Church in the Wild (feat. Frank Ocean)</div>
<div class="large-2 columns"><span class="play" id="play1"><i class="fi-play"></i></span></div>
</div>
<li>
<div class="row">
<div class="large-8 columns">2. Lift Off (feat. Beyonce)</div>
<div class="large-2 columns"><span class="play" id="play2"><i class="fi-play"></i></span></div>
</div>
</li>
<li>
<div class="row">
<div class="large-8 columns">3. Niggas in Paris</div>
<div class="large-2 columns"><span class="play" id="play3"><i class="fi-play"></i></span></div>
</div>
</li>
</ul>
But when i move player.load() into the if statement, i can pause it but when i click on another song while one is playing, it just stops. So what am i doing wrong?
You need to check if the file clicked is the one loaded by the player. You can do that by wrapping the track-setting code and the player.load in this if-statement.
if ($('#player_track').attr('src') !== track){
$('#player_track').attr('src', track);
player.load();
}
The whole code:
window.player = document.getElementById('player');
$('ul.tracks li span.play').click(function(){
$('ul.tracks li span.play').find('i').removeClass().addClass('fi-play');
var trackid = $(this).attr('id');
var track;
if(trackid == 'play1'){
track = 'img/music.mp3';
} else if(trackid == 'play2'){
track = 'img/music2.mp3';
} else {
track = 'img/music3.mp3';
}
if ($('#player_track').attr('src') !== track){
$('#player_track').attr('src', track);
player.load();
}
if (player.paused) {
player.play();
$(this).html('<i class="fi-pause"></i>');
} else {
player.pause();
player.empty();
$(this).html('<i class="fi-play"></i>');
}
});
i have a page that calls for multiple instances of jplayer. everything works fine in Chrome/Safari, but in FF and IE, the first instance of the player loads the 'play' button and progress bar, but the audio doesn't work.
for the 2nd and 3rd instance, the 'play' button is there, but there's no progress bar, and no audio. i'm 90% sure this is an issue with my js file, which looks like this:
$(document).ready(function() {
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/demo.mp3"
});
},
ended: function (event) {
$(this);
},
supplied: "mp3"
}).bind($.jPlayer.event.play, function() { // Using a jPlayer event to avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
});
$("#jquery_jplayer_2").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/English_Commercial Demo.mp3"
});
},
ended: function (event) {
$(this);
},
cssSelectorAncestor:"#jp_interface_2",
supplied: "mp3"
}).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
});
$("#jquery_jplayer_3").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/English_Narration_Demo.mp3"
});
},
ended: function (event) {
$(this);
},
cssSelectorAncestor:"#jp_interface_3",
supplied: "mp3"
}).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
});
and heres the html:
<div class="players">
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_interface_1" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="players">
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_2" class="jp-jplayer">
</div>
<div id="jp_interface_2" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress2">
<div class="jp-seek-bar">
<div class="jp-play-bar">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_3" class="jp-jplayer"></div>
<div id="jp_interface_3" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress2">
<div class="jp-seek-bar">
<div class="jp-play-bar">
</div>
</div>
</div>
</div>
</div>
</div>
i've removed some of the inline styling and other extraneous things like Download buttons, but can add the full code if this is too confusing/ugly (i'm sure theres an extra in there somewhere).
Neither Firefox nor IE will play an MP3 file unless you supply a valid swfPath.
You are supplying a .jp-interface element as the CSS Ancestor but this is incorrect - you need to supply "the cssSelector of an ancestor of all cssSelectors" (see the docs)
try the changes to your code i made in this Fiddle - see if it works for you.
the new HTML markup looks like this
<div class="players">
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_interface_1" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="players">
<div id="jp_container_2" class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_2" class="jp-jplayer"></div>
<div id="jp_interface_2" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="players">
<div id="jp_container_3" class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_3" class="jp-jplayer"></div>
<div id="jp_interface_3" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
and the new Javascript:
$("#jquery_jplayer_1").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
ready: function () {
$(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2665_1315685839.mp3" });
},
play: function () { $(this).jPlayer("pauseOthers"); },
supplied: "mp3"
});
$("#jquery_jplayer_2").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
ready: function () {
$(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2664_1315685834.mp3" });
},
play: function () { $(this).jPlayer("pauseOthers"); },
cssSelectorAncestor:"#jp_interface_2",
supplied: "mp3"
});
$("#jquery_jplayer_3").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
ready: function () {
$(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2660_1315685820.mp3" });
},
play: function () { $(this).jPlayer("pauseOthers"); },
cssSelectorAncestor:"#jp_interface_3",
supplied: "mp3"
});
FF doesn't actually play MP3 files but instead plays OGG files. If the demo songs in the above corrected example code from Lloyd works but when you change the MP3 path to an MP3 file on your server and it doesn't work then make sure your server has the MIME type "application/ogg" (without quotes). The server will see the MP3 file in the code and play it as if it were an OGG application file. I'm not sure why this works on my server. This is not my discovery but rather a tip I found on the Internet. Hope it works for you.
Also make sure the HTML head has Lloyd's new Javascript and is wrapped like this:
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){
Lloyd's javascript code goes here
});
//]]>
</script>
</head>
Tip: Click on Lloyd's "fiddle" link - the "Play" links work.
i don't know why it dosn't work in ie... but opera and ff don't play mp3 file
swfPath: "js",
supplied: "mp3",
wmode: "window"
In order to play them, there is Jplayer.swf file in js folder. You should write swfPath: "write the track of Jplayer.swf"...