Jump to content

Somewhere somehow


IndianaGuy

Recommended Posts

I have wasted probably two weeks trying this and it's time to pay for it. I need a mobile friendly audio player. One that I can make adjustments to add events like what happens when a user clicks pause for example. I don't mind if there is one I can pay for. I just have to have it. Any help, suggestions,links, or things to lookup will be great. jPlayer looked promising but for the love of god, I could not find reasonable documentation on how to install it

Edited by IndianaGuy
Link to comment
Share on other sites

I would just use the <audio> element. If you want to keep track of clicks, make the player invisible and add click events to other elements to control the player, though I'm pretty sure a lot of the more basic events are supported by mobile devices.

 

The name "jPlayer" reminds me of an old flash-based video player. If it's what I'm thinking of, it would certainly not work on mobile devices.

Link to comment
Share on other sites

I have done that over the last couple of weeks. It's all how I want it. I just can't seem to add a something that will show up when the user clicks play and the device needs a few seconds to start playing. I am keeping track of the clicks and the testing shows the user hitting PLAY, PLAY, PLAY, PLAY not knowing the audio file needs to load. I am border line begging for help.

Link to comment
Share on other sites

Check the canplay and canplaythrough events. You seemed to have trouble getting them to work on mobile devices, but perhaps there was something else wrong.

 

https://developer.mozilla.org/en-US/docs/Web/Events/canplay

https://developer.mozilla.org/en-US/docs/Web/Events/canplaythrough

 

It looks like "canplay" only fires if the media is loading slower than it can be played, which is probably why it's not firing on your device. If that's the cause of the problem then canplaythrough should work. You can use both events.

mediaPlayer.addEventListener("canplay", hideLoading);
mediaPlayer.addEventListener("canplaythrough", hideLoading);

function hideLoading() {
  document.getElementsByClassName("loader")[0].style.display = "none";
}
Link to comment
Share on other sites

I have tried the preload attribute both ways. Here is what I have so far. The problem might be somewhere else. Thank you

// Wait for the DOM to be loaded before initialising the media player
document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);
 
// Variables to store handles to various required elements
var mediaPlayer;
// Other unrelated varaiable
 
function initialiseMediaPlayer() {
// Get a handle to the player
mediaPlayer = document.getElementById('media-video');
 
// Get handles to each of the buttons and required elements
playPauseBtn = document.getElementById('play-pause-button');
muteBtn = document.getElementById('mute-button');
progressBar = document.getElementById('progress-bar');
rewindBtn = document.getElementById('rewind-button');
 
// Hide the browsers default controls
mediaPlayer.controls = false;
 
// Add a listener for the timeupdate event so we can update the progress bar
mediaPlayer.addEventListener('timeupdate', updateProgressBar, false);
  
// Add a listener for the play and pause events so the buttons state can be updated
mediaPlayer.addEventListener('play', function() {
// Change the button to be a pause button
changeButtonType(playPauseBtn, 'images/icons-png/pause.png');
}, false);
mediaPlayer.addEventListener('pause', function() {
// Change the button to be a play button
changeButtonType(playPauseBtn, 'images/icons-png/play.png');
}, false);
 
mediaPlayer.addEventListener('ended', function() { this.pause(); }, false); 
 
mediaPlayer.preload="auto";

mediaPlayer.addEventListener('canplay', hideLoading);
mediaPlayer.addEventListener('canplaythrough', hideLoading);
 
}
//END MEDIA PLAYER PREP
 
function hideLoading() {
   document.getElementsByClassName("loader")[0].style.display = "none";
}
 
//more stuff...
Edited by IndianaGuy
Link to comment
Share on other sites

Try setting the preload attribute on your audio element. (Described here: https://developer.mozilla.org/en/docs/Web/HTML/Element/audio)

<audio preload id="media-video" ... >

The reference indicates that if the preload attribute is not present, each browser will decide what to do on its own.

 

Whether or not this fixes your issue, you should be doing it. It looks like browsers may ignore the attribute:

The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.

Link to comment
Share on other sites

Thank you for the information. That's great to know.

I am a little confused. I am not trying to do anything that every single media file on mobile devices is not already doing!

when play is clicked

if media is ready, just play

if it is not ready, show the loader until its ready

then hide the loader!

 

 

Should I start looking at readyState?

Edited by IndianaGuy
Link to comment
Share on other sites

I am getting closer. Ineed this to be in thetogglePlayPause section, not the initialize media player portion.

Still needs organizing, but I am close.

function togglePlayPause() {
// If the mediaPlayer is currently paused or has ended the button status is paused.
if (mediaPlayer.paused || mediaPlayer.ended) {
        // Change the button to be a pause button
        changeButtonType(playPauseBtn, 'images/icons-png/pause.png');
        // Play the media
        $(".loader").show();
        mediaPlayer.play();
        mediaPlayer.addEventListener('canplay', hideLoading);
        mediaPlayer.addEventListener('canplaythrough', hideLoading);
         var Act = 'Play started';
        //function in index page to record user action
        hitPlay();
 }

// Otherwise it must currently be playing
else {
        // Change the button to be a play button
        changeButtonType(playPauseBtn, 'images/icons-png/play.png');
        // Pause the media
        $(".loader").hide();
       //console.log('he hit pause');
       mediaPlayer.pause();
     }
 
function hideLoading() {
   document.getElementsByClassName("loader")[0].style.display = "none";
}
Edited by IndianaGuy
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...