Im using soundcloud dot com to upload my sounds. i want to press a button within my mobile application and have that sound play.
So basically i want my sound to be referenced from the URL that I am given when the button is pressed by the user.
I need to do it with Javascript only. No HTML 5 please. Any help is greatly appreciated cause this is Xtremely frustrating. Any ideas? Thanks in advance.
It's pretty simple to get started really:
function playSound(url) {
var a = new Audio(url);
a.play();
}
Use that as whatever event handler you want for your application. Of course, I'd hope you'd want to do more than just play (for example, maybe pause would be good too?), but it's a start.
let sound = new Audio("http://sound.com/mySound.mp3");
//on play event:
sound.onplay = () => {
};
//on pause event:
sound.onpause = () => {
};
//on end event:
sound.onended = () => {
};
//play:
sound.play();
//pause:
sound.pause();
//stop:
sound.pause();
sound.currentTime = 0;
Use jPlayer to play sound using Javascript. This will take you a lot of time and frustration.
jplayer.org/
Here's what your code might look like with jPlayer. Note: You're not forced to use a skin with jPlayer because all it is is just an API to play audio.
Example code to play a video or audio on load.
$(function() { // executed when $(document).ready()
$("#jpId").jPlayer( {
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "http://www.myDomain.com/myVideo.m4v" // Defines the m4v url
}).jPlayer("play"); // Attempts to Auto-Play the media
},
supplied: "m4v",
swfPath: "jPlayer/js"
});
});
http://jplayer.org/latest/developer-guide/
Related
I have a website that plays an icecast stream with jPlayer.
I want the play button to always start the stream from the live position (like a radio) instead of picking the stream back up from the last position. Attempted behavior:
play plays the stream live > pause suspends / discards the stream / optionally stops downloading it > play plays the stream from live position / reloads the stream.
There is a way to monitor the current media position with $.jPlayer.event.timeupdate as mentioned in comment on this post, and use that to resume playing from the end of the stream.
Alternatively, there must be a way to discard the stream when pausing and then reloading it when hitting play again. I think it is what is happening on this jPlayer demo. But I don't know how to do that part:
The error event is used with a check for the URL_NOT_SET error type to jPlayer("setMedia",stream) back to the live-stream again and jPlayer("play") it.
I am new to javascript and can't make it work. I can't find another post of someone trying to do that. I tried with the "playhead" at 100 which does not start the stream at all.
Here is the code I am using:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "http://realbadradio.ddns.net:21000/mpd.mp3"
})
},
});
});
//]]>
</script>
Here the repo to my website for full code.
I finally found the solution thanks to this answer on a different question related to achieving autoplay in jPlayer.
SOLUTION
$(document).ready(function(){
const stream = {
// stream address
mp3: 'http://realbadradio.ddns.net:21000/mpd.mp3'
};
ready = false;
$("#jquery_jplayer_1").jPlayer({
ready: function () {
ready = true;
$(this).jPlayer("setMedia", stream);
},
pause: function() {
$(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
keyEnabled: true,
preload: 'none',
});
});
I'm using plyr plugin to play a video on my website.
I'm trying to restart the player (vimeo) when the video ends but I'm not having much luck. I'm even trying to console log a message and that's not even working. Can anyone see where I'm going wrong?
JSfiddle attached here.
if ($('.main-hero__youtube__video').length) {
console.log("Video player init");
// Define the controls
var plyr_options = {
autoplay: true,
clickToPlay: true,
showPosterOnEnd: true,
controls: ['mute','progress','play']
};
// Create the plyr instances - this defines players[0] as our primary player.
var players = plyr.setup(plyr_options);
players[0].on('ended', function(event) {
console.log("test");
});
}
You were close, you just needed to call the restart() method (or play() if you're looking for an infinite loop) on your player instance:
players[0].on('ended', function(event) {
players[0].restart();
// players[0].play(); // infinite loop
});
https://jsfiddle.net/yunxyfbh/
Basically I want the user to record a sound with the SoundCloud recorder and once they click save, the sound they just recorded will be embedded on to my webpage.
I use the SC.record() method to get the recording. This is my function for where I save the recordings... Right now nothing is embedded when I try to run it
$('#save a').click(function(e) {
var currentURL ="";
e.preventDefault();
SC.connect({
connected: function() {
$('.status').html('Uploading...');
SC.recordUpload({
track: {
title: 'whatever',
sharing: 'public'
}
}, function(track) {
currentURL = '"'+track.permalink_url+'"';
$('#SCtracks').append('<li id='+currentURL+'>'+currentURL+'</li>');
SC.oEmbed(currentURL, {color: "ff0066"}, document.getElementById(currentURL));
});
}
});
});
But if I go in and call SC.oEmbed with a URL to a recording I made earlier it works fine.
So I think I might be trying to embed the recording before it is fully uploaded, but I don't know where else I could put that statement.
Thanks
This answered my question. I guess you have to just keep checking the state until it is for sure done. If someone know a quicker way please answer
Ok this thing is awesome! I got SoundManager 2 setup within my .js file and have audio playing on my page. My only question at the moment, is figuring out how to play audio outside of the soundManager.setup({...}). For example the following works great...
function mSound() {
/*SETUP SOUND MANAGER 2*/
soundManager.setup({
// where to find flash audio SWFs, as needed
url: 'audio/',
onready: function() {
console.log('SM2 is ready to play audio!');
/*MY SOUND COLLECTIONS*/
soundManager.createSound({
id: 'myIntro',
url: 'audio/Indonesia.mp3',
autoPlay: false,
volume: 15
});
soundManager.play('myIntro');
}
});
}
But if I try to place soundManager.play('myIntro'), into another function like...
function mIntro() {
soundManager.play('myIntro');
}
...the audio does not play. Any advice will be great!
Thanks
I think I solved it. By setting up local variables as parameters for my mSound() function like so...
function mSound(id,url,volume) {
this.id = id;
this.url = url;
this.volume = volume;
/*SETUP SOUND MANAGER 2*/
soundManager.setup({
url: 'audio/',
onready: function() {
//console.log('SM2 is ready to play audio!');
/*MY SOUND COLLECTIONS*/
soundManager.createSound({
id: id,
url: 'audio/'+ url,
volume: volume
});
soundManager.play(id);
}
});
}
...I'm now able to do cool stuff like this within other javascript functions and play sound!
mSound('myIntro','Indonesia.mp3',5);
And you can still still use the soundManager global object properties after you load your custom function. For example you can pause your track like this later in your code...
soundManager.togglePause('myIntro');
Hope this helps someone :)
Have you tried something like this?
var sound = soundManager.getSoundById('myIntro');
sound.play();
It's working in my project.
I am writing a simple game by JavaScript, in which sound should be parallel with JavaScript.
I am using setInterval and I should be sure if the sound is playing correct, without pauses and delays.
I think about it this way: user can start game, when audio is loaded.
How can I do it? Maybe you can advise me another way.
Have a look at JPlayer, you could load the audio track:
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "track.mp3"
});
}
});
And then when your game is ready to start playing call:
$("#jquery_jplayer_1").jPlayer("play", 0);
or if you want to check if the audio is playing:
if(event.jPlayer.status.currentTime > 0) {
//Game start
}