How can two audioplayer play at same time? - javascript

I like to install two audioplayer on my WordPress page so that both players will playing at same time. So how is it possible to tell each player not to stop playing if an other player is running?
Thanks for helping out.
I just started to look for a plugin player.

As per your description you have not mentioned about how do you want that page to load the audio. (For example to load those 2 audio on page load or user input/interactions with them.)
On WordPress you can add custom JS code or some hook to those elements or interaction event.
For easy go if you use on page load(as you have not described the way to interact with them) see if this helps you or if it leads you to any idea about way you want it to implement:
// just for example
function playAudio() {
var audio1 = document.getElementById('audio1');
var audio2 = document.getElementById('audio2');
audio1.play();
audio2.play();
}

Related

Why does js oscillators stop playing sound after some use?

I'm trying to make a simple piano with js but I don't want to use audio samples, instead I want to generate sound programmatically. To play single sound I am using this code from this blog https://marcgg.com/blog/2016/11/01/javascript-audio/
var context = new AudioContext()
var o = context.createOscillator()
var g = context.createGain()
o.connect(g)
g.connect(context.destination)
o.start(0)
g.gain.exponentialRampToValueAtTime(0.00001, context.currentTime + 5)
I found that after playing it more than about 50 times this method stops working. No sound plays when running this code, context.currentTime does not change and stays 0. How can I fix it without stopping already playing sound?
Don't create a new AudioContext for each note; create one and use it for all of them. This will not only save resources; it will also help with playing multiple notes at precise times if you decide you want to do that.
You're also accumulating oscillators that are still playing, just extremely quietly. You need to stop them sometime. The good news is, the Web Audio API is designed to make it easy to do this:
// stop after 5 seconds from now
o.stop(context.currentTime + 5);

How to play a sound notification with Chrome for Android with Javascript?

Playing a MP3 with
var popsound = new Audio('http://gget.it/u1urz3zh/popsound.mp3');
popsound.load();
popsound.play();
doesn't work in Chrome for Android. According to this link, this is a feature, to not allow playback this way, i.e. without explicit user input.
I understand that this is done on purpose (to save mobile data for the user, mainly), but then how to make a website play a notification sound? There surely is a way to play notification sounds (notifications are popular on phone), how to do it?
If not possible, at least, how to know (with JS) if the browser will be allowed or not allowed to play sound with .play()? (then it will be possible to show if sound notifications are available or not on the website)
Context : I'm creating a web chat service, then how to play a sound notification after a message is posted if I cannot use .play() in Chrome for Android?
At least this trick allows to know in advance if media playback requires user gesture:
function mediaPlaybackRequiresUserGesture() {
var audio = document.createElement('audio');
audio.play();
return audio.paused;
}
Found here.
I met the same problem in my app. My application usage scenario was like this:
1) click the button to show a table with information (user action)
2) show the table and refresh data in it by AJAX
3) play sound when data has been changed
Fortunatelly I had the user action (step 1) so I was able to "initiate" the sound by it and then play it by javascript without the user action needed. See the code.
HTML
<audio id="kohoutAudio">
<source src="views/images/kohout.mp3">
</audio>
<button id="btnShow">Show table</button>
Javascript
$("#btnShow").click(function () {
//some code to show the table
//initialize the sound
document.getElementById('kohoutAudio').play();
document.getElementById('kohoutAudio').pause();
});
function announceChange(){
document.getElementById('kohoutAudio').play();
};
Just to add to this, Chrome browser in Android now has a permissions options page that allows the user to set autoplay option. Not sure if this helps on your end.
I have attached pictures from Android Chrome browser settings:
You can add an audio element to the DOM and change it dynamically via javascript.
setTimeout(function() {
document.getElementById('audio').src = 'http://gget.it/u1urz3zh/popsound.mp3';
document.getElementById('audio').load();
document.getElementById('audio').play();
}, 2000);
<audio id="audio"></audio>
Here is how I played sound in one of my web project,
I had used JQuery, but you can modify it little bit to work in Javascript or instead use JQuery.
create a html tag audio and set the source of it.
<audio id="chatAudio"><source src="01.mp3" type="audio/mpeg"></audio>
and fire a play method of audio using JQuery.
$('#chatAudio')[0].play();
I am not sure if it works for you or not. but you can try this way.

Higlight text while playing mp3

I want to know how they did this:
http://al-quran.info/#1:1
When you play a verse, the second verse will play after it. It also highlights the text that is "playing". Is there an example I can work with or anything?
So what I want is to click on play at verse A and it automatically plays, highlights and scrolls B,C etc. after that.
How do I do this? I know this is done with Jplayer but I don't know much.
Thank you in advance.
Most of the HTML5 audio players are using HTML5 audio elements. From the javascript point of view you can access bunch of useful methods and properties defined in HTMLMediaElement Interface
just to give you a picture here is some example code with naive algorithm:
var audioElement;
audioElement = document.getElementById('audioElementID');
while(isPlaying()){
if(audioElement.ended){ //Indicates whether the media element has ended playback.
playAndHighlightNext();
}
}

OKVideo: Controlling Video Playback with Links

Plugin Reference: http://okfoc.us/okvideo/ | https://github.com/okfocus/okvideo
Hey Guys,
I've been trying to get my links to control which video plays with the OKVideo plugin but for some reason it doesn't work. I've tried a myriad of different method with no success.
To activate the plugin, you use:
$(function(){
$.okvideo({
source: 'BHE8Yre3Ex8',
})
});
I've added some links that store the YouTube video ID as an attribute. When the user clicks the link, the video should stop playing the current video and begin playing the next selected one.
Also, I'm not trying to have the video play automatically (on page load)–only on a video selection. I've looked into the code but the options don't seem to work.
I've stripped my code and placed the core of it into jsfiddle, here: http://jsfiddle.net/mikemiketm09/rd4fL/
FYI: It did say you can use YouTube API with the plugin.
Your help would be greatly appreciated.

redirecting the page after a video plays using an html5 video player

I am making a video reel (a portfolio) website, using wordpress as my backend, and the videojs html5 video player with each video in a different post. I want the videos to play successively, so that when one video finishes it redirects to the "next post".
I'm having trouble seeing if there are any DOM calls that fire after the video plays. Basically I want to fire the redirect as soon as the video plays.
Can someone point me in the right direction?
Thanks!
you need to call a function on ended... or the relocation just there...
That's it.
It looks like there is an ended event that you can hook up to.
Ended up using the following code:
$(document).ready(function(){
var sStr = "<?php echo get_permalink(get_adjacent_post(true,'',true)); ?>";
$(".video-js").bind('ended', function(){
window.location = sStr;
});
});

Categories

Resources