IndianaGuy Posted January 11, 2017 Share Posted January 11, 2017 (edited) 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 January 11, 2017 by IndianaGuy Link to comment Share on other sites More sharing options...
Ingolme Posted January 11, 2017 Share Posted January 11, 2017 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 More sharing options...
IndianaGuy Posted January 11, 2017 Author Share Posted January 11, 2017 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 More sharing options...
Ingolme Posted January 11, 2017 Share Posted January 11, 2017 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 More sharing options...
IndianaGuy Posted January 11, 2017 Author Share Posted January 11, 2017 ok, so now I need to add a way for the loader to show up when the user clicks plays and what you wrote will hide it when the media can beplayed. Am I thinking about this right? Right now, the loader is there when the pages loads and it stays there lol Link to comment Share on other sites More sharing options...
IndianaGuy Posted January 11, 2017 Author Share Posted January 11, 2017 (edited) I tried it on a desktop and the loader shows up for a very short period of time them goes away. On the mobile device thou, it just stays there until I hit play, then is goes away Edited January 11, 2017 by IndianaGuy Link to comment Share on other sites More sharing options...
Ingolme Posted January 11, 2017 Share Posted January 11, 2017 It sounds like the mobile device doesn't start downloading the file until the play button is clicked. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 11, 2017 Share Posted January 11, 2017 I suppose you are using 'preload' attribute? Link to comment Share on other sites More sharing options...
IndianaGuy Posted January 11, 2017 Author Share Posted January 11, 2017 (edited) 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 January 11, 2017 by IndianaGuy Link to comment Share on other sites More sharing options...
Ingolme Posted January 11, 2017 Share Posted January 11, 2017 What's the HTML code for your media element? Link to comment Share on other sites More sharing options...
IndianaGuy Posted January 11, 2017 Author Share Posted January 11, 2017 its really short lol <audio id="media-video" onended="myEnd()" controls > <source src="audio/<?echo $Story;?>"> </audio> Link to comment Share on other sites More sharing options...
Ingolme Posted January 11, 2017 Share Posted January 11, 2017 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 More sharing options...
IndianaGuy Posted January 11, 2017 Author Share Posted January 11, 2017 (edited) 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 January 11, 2017 by IndianaGuy Link to comment Share on other sites More sharing options...
IndianaGuy Posted January 11, 2017 Author Share Posted January 11, 2017 (edited) 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 January 11, 2017 by IndianaGuy Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now