How to make my audio player randomly choose a file? - html

Right now in my site I'm using
<embed name="audio" src="audio1.mp3" loop="true" hidden="true" autostart="true">
to play audio files on the launch. I want to be able to have randomly choose from a collection of audio files in the directory. How can I do this?

EDIT : Sorry I have misread the question.
It is impossible to select folder and get the files. This is due to security feature of the browser.
You may however
Create an array that stores your url sources. Then randomly select an item from the array
var source = [
"https://www.sample-videos.com/audio/mp3/crowd-cheering.mp3",
"https://www.sample-videos.com/audio/mp3/wave.mp3",
"http://www.kozco.com/tech/organfinale.mp3"
];
function randomPlay(){
var toPlay = source[Math.floor(Math.random()*source.length)];
var player = document.getElementById('player');
player.src = toPlay;
player.load(); //call this to just preload the audio without playing
player.play();
}
See this fiddle
https://jsfiddle.net/tq4ughrc/11/

Related

as3 ShineMP3Encoder issue (clicking sound when mp3 audio starts)

After recording a sound and converting it into wav...
var enco:WaveEncoder=new WaveEncoder();
var o:ByteArray=enco.encode(soundO,1,16,44100);
I pass it to ShineMP3Encoder
_mp3_encoder = new ShineMP3Encoder(o);
_mp3_encoder.addEventListener(Event.COMPLETE, onMP3EncoderComplete, false, 0, true);
_mp3_encoder.start();
onMP3EncoderComplete has two vars
var mp3:ByteArray = _mp3_encoder.mp3Data;
var wav:ByteArray = _mp3_encoder.wavData;
wav audio is normal, but mp3 almost always (99%) has a clicking sound when audio begins.
Here's a picture from SoundForge app.
We can see these two files are identical, but mp3 has a clicking sound at the beginning.
Is it my system/hardware/compiler problem or it's something else?
btw I tried some online swf example of ShineMP3Encoder and it has same issue. So probably that's not my compiler problem

HTML5 increase youtube speed 2x from url?

I would like to know how to speed up a youtube video 2x without the user clicking on the HTML5 (of the video), but instead by modifying the URL.
For example, I know how to watch video starting at a specific time by appending to the URL the parameter &t=1m1s (for 1 minute and one second). Is it possible to use a similar method to speed up the video 2x?
What parameters should I add to the URL to watch video in double speed (I'm using html5)?
There's no way to change playback speed by URL arguments.
Anyway, if you're working with HTML, you can take advantage of the YouTube Player iFrame API.
Here's how to configure your player with all the JavaScript:
https://developers.google.com/youtube/iframe_api_reference#Getting_Started
And here's the function you're looking for to set playback speed:
https://developers.google.com/youtube/iframe_api_reference#Playback_rate
So you can edit your onPlayerReady function like this:
function onPlayerReady(event) {
player.setPlaybackRate(2); // This is what you're looking for
event.target.playVideo();
}
You can of course pass on step 5 of the documentation as this will stop your video from playing after six seconds.
If you have trouble setting that up, I'll edit a JSFiddle later (couldn't do it at work as my Flash plugin won't launch).
Update :
Here's the JSFiddle working fine with this code exactly:
http://jsfiddle.net/jpreynat/e11oy0eu/
I was trying to do this exact same thing earlier this week.
A solution purely from a URL parameter isn't possible. (or if it is,
it's not documentation here:
https://developers.google.com/youtube/player_parameters)
I came accros this JSFiddle by Johan Preynat: http://jsfiddle.net/jpreynat/e11oy0eu/
Worked for me, so hopefully it'll be useful for you too
HTML
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
JavaScript
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
player.setPlaybackRate(2);
event.target.playVideo();
}
See also the YouTube documentation on this:
https://developers.google.com/youtube/iframe_api_reference
Can you inject a shift > or < from users input via url or easier javascript? Maybe its easier to force the hot key press from the users end.

Record sound of a webaudio api's audio context

I am using web audio api in my project. Is there a way to record the audio data that's being sent to webkitAudioContext.destination?
.wav files are playing in my browser, so there should be some way to store that data into a (.wav) file . i know this is possible, but not yet find any solution :(
recorder.js can help me, but upto now i found it is only recording the microphone live input, is it possible to record my audio(.wav files) with the help of recorder.js? plz help
i am using this sample for recording https://github.com/mattdiamond/Recorderjs
I have managed to achieve this through a pure WebAudio solution (no Recorderjs needed). You can see it working fully on my discJS project and use the relevant source file to see how my complete code is working. I imagine this is only relevant to recording WebAudio nodes that you are playing yourself programmatically.
First you will need an HTML <audio> to use as a final destination. In this case I choose to show the controls so that the user may easily download the resulting file.
<audio id='recording' controls='true'></audio>
Now for the Javascript mojo:
const CONTEXT = new AudioContext();
var recorder=false;
var recordingstream=false;
function startrecording(){
recordingstream=CONTEXT.createMediaStreamDestination();
recorder=new MediaRecorder(recordingstream.stream);
recorder.start();
}
function stoprecording(){
recorder.addEventListener('dataavailable',function(e){
document.querySelector('#recording').src=URL.createObjectURL(e.data);
recorder=false;
recordingstream=false;
});
recorder.stop();
}
Now the final glue is that whenever you play an audio source, you also need to connect it to your recording stream:
function play(source){
let a=new Audio(source);
let mediasource=CONTEXT.createMediaElementSource(a);
mediasource.connect(CONTEXT.destination);//plays to default context (speakers)
mediasource.connect(recordingstream);//connects also to MediaRecorder
a.play();
}
This is a relatively primitive setup that works fine (tested on Firefox 52 and Chrome 70). For a more proper implementation, see MediaRecorder on MDN.
As found on the github: var rec = new Recorder(source [, config]), where source is an audio node. So it's up to you to put in the right node. If you play .wav files using <audio>, you can send it to the recorder:
<audio id="audio" src="" controls></audio>
var a = document.getElementById('audio');
var context = new webkitAudioContext();
var sourceNode = context.createMediaElementSource(a);
var rec = new Recorder(sourceNode);

preload html5 audio while it is playing

For HTML5 Audio, let's say you have a list of two songs you want to play. Currently I have it set up so that when the current song stops playing, it loads the new song and plays it. I want to have it so that it loads the next song while the current song is finishing, maybe 20 seconds before the current song finishes. I tried to change the src attribute for the audio object while the song is playing, but that just immediately stops playback for the current song. Is there some other method that allows me to preload the next song while the current song is playing?
You could use jQuery to create a jQuery object:
var nextSong = document.createElement('audio'); //Creates <audio></audio>
nextSong = $(nextSong); //Converts it to a jQuery object
$(nextSong).attr('autoplay') = false; //You don't want this dynamically loaded audio to start playing automatically
$(nextSong).attr('preload') = "auto"; //Make sure it starts loading the file
$(nextSong).attr('src') = url_to_src; //Loads the src
This should start load the song into an element in the browser's memory and when the song is over, call something like:
$(audio).replace(nextSong);
This isn't tested. You probably don't even need jQuery.
This may work without jQuery:
var nextSong = document.createElement('audio');
nextSong.autoplay = 'false';
nextSong.preload = 'auto';
nextSong.src = url_to_src;
Give it a whirl and let me know!
This might be off the mark, but have you tried calling the element's load() method?
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#loading-the-media-resource
Edit:
Ah, I think I misunderstood the problem. You want to play two songs back to back in the same media element? I'm not sure how feasible that is... it might be easier to place each song in its own Audio element. You could always dynamically generate these, if you're worried about flexibility.

Audio of a specific video swf doesn't stop when I load another URLRequest

I am trying to stop the audio of the video swf and I can't get it to stop. Here is my code for loading the file:
var myLoader:Loader= new Loader();
myLoader.x=420;
myLoader.y=200;
// boolean variable set for use below in our function
var screenCheck:Boolean = false;
//These three linces keep stafe elements the same size, so they don't distort
var swfStage:Stage = this.stage;
video_btn.addEventListener(MouseEvent.CLICK,contentvideo);
function contentvideo (event:MouseEvent):void{
myLoader.load(new URLRequest("prevideo.swf"));
addChild(myLoader);
movie_btn.stop();
movie_btn.visible=false;
}
Now I have other functions that load different URLRequest and when they are loading, the audio keeps playing. Do I have to add a line of code to them? I also have an MP3 player and tried SoundMixer.stopAll(). I still need the mp3 player to keep playing.
I'm not familiar with what you're doing but just looking at the code and given the problem you're experiencing I wonder if that
addChild(myLoader);
has anything to do with it. It seems like the kind of thing that could easily create multiple child objects which is why you continue to experience the sound play back. Is there a removeChild[0] option or something?
A shot in the dark I know but I thought I'd offer the possibility anyway.