My Mobile App provides access to a large database of mp3 Audios. The App also allows the user to start an Audio from a specific position (basically last played position).
Whenever I try to run an audio from a given position, it first run the audio from the start for a second and then jumps to the given position.
I have also tried muting the audio but apparently mute also doesn't work after the first instance.
Here is how I am try to do this:
LastAudioPosition = 25;
$(this).jPlayer("play",LastAudioPosition);
After not finding a solution anywhere I ultimately settled with almost perfect solution. The idea is to mute the player for a small duration while the wrong part is played and then unmute it:
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: gsLink
}).jPlayer("play",gQFA_LastAudioPosition);
},
ended: function() {
endFunction();
},
canplay: function() {
$(this).jPlayer("mute");
$(this).jPlayer("play");
$(this).jPlayer("pause");
$(this).jPlayer("play",gQFA_LastAudioPosition);
setTimeout(function () {
$("#jquery_jplayer_1").jPlayer("unmute");
}, 200);
},.................
Related
My website plays a background song and some audio effects at the same time. Although the song loads fine (I can see its duration via Audio.duration property), it doesn't play, while the audio effects play (I have already clicked on the screen to activate audio playing). On Firefox in my PC it plays without problem. The audio file is a 10 MB mp3 (but my Android is at home wi-fi). Below is part of my code.
var music,clicked=false,downloaded=false;
function play() {
music.play();
}
function canPlay() {
downloaded = true;
if (clicked) {
play();
}
}
function touchStart(e) {
if (!clicked) {
clicked = true;
if (downloaded) {
play();
}
}
}
function load() {
music = new Audio('mp3/music.mp3');
music.addEventListener('canplaythrough',canPlay,false);
window.addEventListener('touchstart',touchStart,false);
}
The load function is called in the onload of body. The clicked and downloaded variables are required because I never know what happens first: the user click or the audio finish downloading.
On Google mobile-friendly test, it says the audio file couldn’t be loaded (Status: Other error). I've read this test doesn't wait for more than 3 seconds. However, reading the time of the song in seconds doesn't prove it has downloaded?
Why won't the song play on mobile?
EDIT
I created a timer interval that tells me the position (music.currentTime) of the song once every minute. On desktop, it gives the right time. On mobile, it always gives 0, meaning that the song, although loaded (?), isn't really being played.
EDIT 2
I investigated the promise returned by music.play(), and noticed it was giving the error: "(NotAllowedError: play() failed because the user didn't interact with the document first)". It seems that touchStart doesn't count as a "user interaction" the way that mouseDown does...
In the end, I removed both touchStart and touchEnd (each with his own preventDefault), leaving the song to be played after the resulting mouseDown. I've kept the touchMove, however, because it's different from the mouseMove, and required for my site.
I'm using react-native-sound to playback looped audio files (exactly mp3 format). The problem is that there is a gap between the loops.
Here is my code example:
loadSound = (s) => {
let sound = new Sound(s, Sound.MAIN_BUNDLE, (error) => {
if (error) {
console.log('failed to load the sound', error);
return;
} else {
sound.setNumberOfLoops(-1);
}
});
return sound;
}
let sound = loadSound('campfire.mp3')
sound.play();
Is there any workaround how to make the loops to sound smooth?
Actually, this issue is open on github, but there is no solution yet...
There are gaps between loops because of the bug in Android MediaPlayer (which is used under the hood).
To fix the problem I've created the react-native-audio-exoplayer module, which has pretty same functionality as the react-native-sound, but it is based on the Android ExoPlayer. The API is a bit different but more robust and modern (have a look at the docs).
Later if I have time I'll do a pull request to introduce ExoPlayer in the react-native-sound.
But for now feel free to use react-native-audio-exoplayer as a good workaround (for now it's implemented only for Android).
Using the below version of the react-native-sounds fixed the gap issue.
https://github.com/Menardi/react-native-sound-gapless.git
From the README of the git repo:
Simply setting a track to loop on Android does not make it gapless,
instead leaving a short silence before restarting the track. However,
Android does actually support gapless playback between different
tracks. So, this fork essentially loads the same track twice, and gets
Android to handle the gapless playback for us. The downside is that
you will use more memory than before, because the track is loaded
twice. For most cases, this shouldn't matter, but you can profile your
app in Android Studio if you are concerned.
I have same issue with looping the sound. What I did to make it work is to call the same play sound function once sound play completed. I hope this will helps you.
function playBackground(){
bgSound = new Sound(bgMusic, (error, sound) => {
if (error) {
alert('error' + error.message);
return;
}
bgSound.play((success) => {
if(success)
{
// console.log("Play completed");
playBackground();
}
bgSound.release();
});
});
}
I have an issue with sound output on android (Galaxy S7 edge + crosswalk):
Before my call when I try to change the sound I can set the "ringtone" volume:
Then I'm starting a webrtc audio call with
const constraints = {
video: false,
audio: true,
};
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => this.stream = stream)
I can change the call volume by pressing the volume buttons:
Then I'm ending it by calling
this.stream.getTracks().forEach((track) => {
track.stop();
});
But the sound is still "In-Call" :
When I close the app, I can change ringtone again...
What's wrong?
There is no issue in your 'ending' code. Just make sure navigator.mediaDevices.getUserMedia called only once or all tracks stopped before it called again.
$(document).on('click', '#bar img', function () {
alphaLetter = $(this).data('club-id');
audio_file_path = '/android_asset/www/audio/'+alphaLetter+'.mp3';
var my_media = null;
my_media = new Media(audio_file_path);
my_media.play();
});
Above is my code to play sound. It played sound, but when I restarted my project it has stopped working since then, and gives these errors;
E/MediaPlayer(2306): error (-19, 0)
E/MediaPlayer(2306): Attempt to call getDuration without a valid mediaplayer
E/MediaPlayer(2306): error (-38, 0)
E/MediaPlayer(2306): Error (-19,0)
This can be caused by you having too many media objects running at the same time. After the sound is finished you should release it.
The PhoneGap documentation says this about release:
Function media.release is a synchronous function that releases the
underlying operating systems audio resources. This function is
particularly important for Android as there are a finite amount of
OpenCore instances for media playback. Developers should call the
'release' function when they no longer need the Media resource.
I got the same error as well and using reset after finished sounds worked swell for me. Remember to call it after the sound has completed though, such as:
var my_media = null;
my_media = new Media(audio_file_path, function()
{
this.release();
});
my_media.play();
I've written more about the problem here if you are interested but the above solution should work well.
It seems as if this error pops up whenever you try to play the sound even though it is not fully loaded at the certain moment (Attempt to call getDuration).
I looked up the Phonegap documentation and couldn't find a method that may check for the availability of the sound. What you can do is:
Build a Timer that always waits for some time until the sound shall be played.
Use var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]); for some further handling when playing the sound fails.
Good day,
I'm currently building a website for myself (I'm a composer/producer), and I'm using Media Element for the main demo page. The page is under construction at the following link:
http://www.vincentrubinetti.com/listen.html
http://www.vincentrubinetti.com/listen.js
Below are what I think are the relevant functions and code:
function initPlayer()
{
player = new MediaElementPlayer('#listen_player',{
success: function (mediaElement, domObject)
{
mediaElement.addEventListener('play', resumeSong, false);
mediaElement.addEventListener('ended', playNextSong, false);
mediaElement.addEventListener('pause', pauseSong, false);
}
});
[omitted]
}
function setSong(element)
{
if (element != "")
{
unselectAllSongs();
document.getElementById(element).className = "listen_song_highlight";
[omitted]
var newSrc = document.querySelector("#"+element+" .listen_song_source").title;
player.pause();
player.setSrc(newSrc);
player.load();
}
}
function playSong(element)
{
document.querySelector("#"+element+" .listen_song_status").innerHTML = "playing";
player.play();
}
function playNextSong()
{
var newSong = document.querySelector(".listen_song_highlight + div.listen_song");
if (autoplay && newSong != null)
{
setSong(newSong.id);
playSong(newSong.id);
}
else
{
document.querySelector(".listen_song_highlight .listen_song_status").innerHTML = "stopped";
}
}
All the CSS end of this seems to be fine. It finds the next song on the list and sets the new source; I've verified it does this properly via alert and other debugging. However, on the Android default browser and the Dolphin browser, it seems to not be able to load the mp3 sometimes, and prematurely triggers the "ended" event to go to the next song. The result is that it appears to skip 2-3 songs after one is done playing. And it takes some finagling even to get it to play one, clicking on the song divs and the player play button. I can type in the same url that's in the html, and the browser will play/download it just fine, no problems accessing or loading it.
Here are the 3 mp3 files that repeat down the playlist, for reference. They are by me, but are placeholders for the real music.
NEW/music/creation.mp3
NEW/music/startup.mp3
NEW/music/win.mp3
Note that all of this works properly on Chrome, Firefox, IE8+, and Android Chrome (I haven't tested iPhone or iPad yet).
Is my diagnosis correct? Can anyone point me in the right direction? Is there any experience where MediaElement doesn't work properly on the Android default and Dolphin browsers?
I have the same problem in android (but with video...)
I was told that this is an issue with the file not being downloaded in time -- i.e. the browser starts the download, but since the file isn't downloaded it is 0:00 long, so the ended event is triggered.
If there is someway to make it so that the video / audio can be downloaded faster it solves the problem.
Strangely enough, if the device has good WiFi then this problem basically disappears.
See what John Dyer said about it here:
https://github.com/johndyer/mediaelement/issues/543