We Keep Coding

How to play sound in javascript?

I create websocket server in python to handle notification event. Now, i can receive notification, the problem is i can't play sound because new autoplay policy changed, if i play sound using javascript it give me domexception. Any suggestion please ?

As i know, playing sound is simple in html-javascript. like this example: https://stackoverflow.com/a/18628124/7514010
but it depend to your browsers and how you load and play, so issues is:
Some of browsers wait till user click something, then let you play it (Find a way for it)
In some case browsers never let you play till the address use SSL (means the HTTPS behind your url)
The loading be late so the playing be late / or even not start.
So i usually do this:
HTML
<audio id="notifysound" src="notify.mp3" autobuffer preload="auto" style="visibility:hidden;width:0px;height:0px;z-index:-1;"></audio>
JAVASCRIPT (Generally)
var theSound = document.getElementById("notifysound");
theSound.play();
And the most safe if i want sure it be played when i notify is :
JAVASCRIPT (In your case)
function notifyme(theTitle,theBody) {
theTitle=theTitle || 'Title';
theBody=theBody || "Hi. \nIt is notification!";
var theSound = document.getElementById("notifysound");
if ("Notification" in window && Notification) {
if (window.Notification.permission !== "granted") {
window.Notification.requestPermission().then((result) => {
if (result != 'denied') {
return notifyme(theTitle,theBody);
} else {
theSound.play();
}
});
} else {
theSound.play();
try {
var notification = new Notification(theTitle, {
icon: 'icon.png',
body: theBody
});
notification.onclick = function () {
window.focus();
};
}
catch(err) {
return;
}
}
} else {
theSound.play();
}
}
(and just hope it be played. because even possible to volume or some customization make it failed.)

to bypass new autoplay policy :
create a button that can play the sound, hide it and trigger the sound with :
var event = new Event('click');
playBtn.dispatchEvent(event);
EDIT
assuming you have :
let audioData = 'data:audio/wav;base64,..ᴅᴀᴛᴀ...'; // or the src path
you can use this function to trigger whenever you want without appending or create element to the DOM:
function playSound() {
let audioEl = document.createElement('audio');
audioEl.src = audioData;
let audioBtn = document.createElement('button');
audioBtn.addEventListener('click', () => audioEl.play(), false);
let event = new Event('click');
audioBtn.dispatchEvent(event);
}
usage :
just playSound()
EDIT 2
I re test my code and it does'nt work hum ... weird

Toggle Play/Pause Youtube Video with external button

I have a template I'm building out using fullPage js to create sliding sections. The page supports video, but scroll and gestures are disabled when users scroll with the cursor on top of the video itself. Likewise, this behavior is observed on mobile.
To work around this, I'm using an empty div overlaying the youtube iframe. This solves the scrolling behavior, but I also lack the ability to directly control the youtube player. I've tried using the youtube API and jquery to fake being able to toggle play/pause with the empty div I have on top of the youtube player, but it's not working.
http://codepen.io/lumpeter/pen/XpayeB
The primary code for youtube is:
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("player");
ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
}
function onPlayerReady(event) {
$('#video-button').click(function(event){
ytplayer.playVideo();
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
$('#video-button').click(function(event){
ytplayer.pauseVideo();
});
}
else {
$('#video-button').click(function(event){
ytplayer.playVideo();
});
}
}
Can anybody tell why this isn't working? I have event listeners looking for changes and using a boolean to detect the state of the video to toggle play/pause, but for some reason this doesn't work like I anticipated.
===============UPDATE=================
I've also tried the following:
$(document).on('click', '#pauseVideo', function(){
player = new YT.Player('myVideo')
if (event.data == player.PlayerState.PAUSED) {
$('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}','*');
}
if (event.data == player.PlayerState.PLAYING) {
$('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
}
});
However, I get the error "Uncaught ReferenceError: YT is not defined."

As fullpage.js already does part of the job by adding ?enablejsapi=1 and loading the JS script of the API for you, then you only have to do this:
var player;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('myVideo');
}
$(document).on('click', '#pauseVideo', function(){
$('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
});
Reproduction online

Thanks Alvaro! Yeah I was overthinking the solution a bit with the youtube api. I just needed to use a boolean with a binary true/false statement. Super easy, should have seen it before. Again thanks for your help!
var player;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('myVideo',{
events: { 'onStateChange': onPlayerStateChange }
});
}
var isPlaying = true;
$(document).on('click', '#pauseVideo', function(){
if ( isPlaying == true){
$('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
isPlaying = false;
} else {
$('#myVideo').get(0).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}','*');
isPlaying = true;
}
});

Getting an embedded YouTube video to play after it's been closed & re-opened on iOS7 Safari

Relatively new to JS here. I've created a button that embeds a YouTube video on the page when you click it, and the user has the ability to close it. On desktop and Android OS, it can be closed and re-opened as many times as the user wants. However, on iOS, the video only plays the first time.
I believe this issue is caused by the fact that Apple doesn't want the video to play without the user's permission, so when you click the "play" button it brings up the video - but the default YouTube play button itself is not there when the video is closed and re-opened.
This should be most of the relevant code.
VideoPlayer = new VideoPlayer('Header', 'xi2-7FCuDdg');
$("#HomePlayButton").on('click', function () {
disable_scroll();
VideoPlayer.play();
$("#Header").append($('<img src="/images/close.png" />'));
$("#VideoCloseButton").on('click', function () {
VideoPlayer.stop();
VideoPlayer.hide();
enable_scroll();
$("#VideoCloseButton").unbind('click');
$("#VideoCloseButton").remove();
return false;
});
});
this.play = function () {
if (!Initialized) {
// This autoplays the video
Init();
Initialized = true;
} else {
if ($("#" + YouTubeElementId).css('display') == "none") {
$("#" + YouTubeElementId).css('display', 'block');
}
YouTubePlayer.playVideo();
}
}
this.stop = function () {
YouTubePlayer.stopVideo();
}
this.isPlaying = function () {
return (Initialized) ? YouTubePlayer.getPlayerState() == 1 : false;
}
this.hide = function () {
$("#" + YouTubeElementId).css('display', 'none');
}
this.show = function () {
$("#" + YouTubeElementId).css('display', 'block');
}
I'm assuming the easiest way to solve this would be to entirely destroy the iframe and make a new one every time the video is closed, but I was unable to successfully implement that.
Glad to post more code if it's necessary.

How to create html button that runs two functions?

Hello I'm trying to create a play and pause button for a little web application I'm creating. I've already made a button that plays and another button that pauses but but now I need a button that'll run the play function when clicked and go back to the pause button when clicked.
var audio = new Audio("audio.mp3");
$(".play").click(function () {
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).toggleClass(".play");
});
And here's the buttons
<div class="play"><img src="../images/play.gif"></img></div>
<div class="pause"><img src="../images/pause.gif"></img></div>
I know there could be and easy way to make a div change classes every time its clicked.

I would set up the <html> like this:
<div id="play"><img src="../images/play.gif"></img></div>
<!-- initially a play button -->
Then I would just use a boolean to switch back and forth in the script.
var toggleIt = false;
$("#play").click(function(){
if (!toggleIt){
audio.play();
toggleIt = true;
$("#play").find("img").attr("src", "file url here");
}
else{
audio.pause();
toggleIt = false;
$("#play").find("img").attr("src", "file url here");
}
})
edit: and here is a fiddle using wonderful place holder kittens. Yes, you should be grateful for my exquisite taste in placeholder pictures.

var audio = new Audio("audio.mp3");
$(".play").click(function () {
$(this).hide();
$(".pause").show();
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).hide();
$(".play").show();
$(this).toggleClass(".play");
});
this is the simplest way. it would probably be better to do it with css psuedo classes, but i leave this pleasure to you if you care enough

You can create 2 diferents button and change de visibility
var audio = new Audio("audio.mp3");
$("#play").click(function () {
audio.play();
$("#play").hide();
$("#pause").show();
})
$("#pause").click(function () {
$("#pause").hide();
$("#play").show();
});

Set a variable then use a conditional to see if you should either play or pause the audio:
<div class="button"><img src="../images/play.gif"></img></div>
var play = true;
$(".button").click(function(){
if (play){
// Play
audio.play();
$(".button img").attr("src", "../images/pause.gif");
play = false;
} else {
// Pause
audio.pause();
$(".button img").attr("src", "../images/play.gif");
play = true;
}
});
Example

var audio = new Audio("audio.mp3");
$(".play").click(function () {
$(this).hide();
$(".pause").show();
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).hide();
$(".play").show();
$(this).toggleClass(".play");
});

How to pause streaming in soundcloud javascript api

I would like to allow a sound file to play and pause. The documentation shows how to play a streaming file:
$("#stream").live("click", function(){
SC.stream("/tracks/{'track-id'}", function(sound){
sound.play();
};
It uses Sound Manager to stream and uses some of it's objects and methods... like .pause()!
So here's the code i think should work:
var is_playing="false";
$("#stream").live("click", function(){
SC.stream("/tracks/{'track-id'}", function(sound){
if (is_playing==="true")
{
sound.pause();
is_playing = "false";
console.log(is_playing);
}
else if (is_playing === "false")
{
sound.play();
is_playing = "true";
console.log(is_playing);
}
});
However, it continues to play the track without pausing. Any ideas?
Thanks.

var is_playing = false;
soundManager.setup({
url: '/swf/soundmanager2.swf',
preferFlash: false,
onready: function() {
var mySound = soundManager.createSound({
id: 'aSound',
url: 'sonidos/sonido1.mp3' ,
autoplay: false
});
$("#stream").live("click", function(){
if (is_playing==false){
mySound.play();
is_playing = true;
}else if (is_playing== true) {
mySound.stop();
is_playing = false;
}
});
},
/* ontimeout: function() {
// Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
}*/
});
</script>

You have to use sound.stop();
There is also a built in function to toggle play/pause of a sound.
Use sound.togglePause(); to do that.

SC.stream("/tracks/13680213", function(sound) {
SC.sound = sound;
});
This means you aren't writing event listeners inside your SC.stream constructor then you can access the following (and more) at will:
SC.sound.play();
SC.sound.pause();
SC.sound.stop();
SC.sound.pause();
SC.sound.playState;

Since there are very few answers on this subject, I thought I would answer my own question.
I went ahead and downloaded Sound Manager 2 and placed the necessary files where they needed to be (you can find this in the basic tutorials section of the sound manager2 page.)
http://www.schillmania.com/projects/soundmanager2/demo/template/
The trick wass to locate the SoundCloud mp3 associated with the user I wanted to embed. To do this, I had to use a RESTClient and enter the appropriate api url.
It looks like this.
http://api.soundcloud.com/tracks/12758186.json?client_id={MyClient_ID_number}
The http://api.soundcloud.com/tracks/ is a general pointer to the track id="12758186". This is followed by the JSONP inclusion of my personal client_id to validate my request to the soundcloud server.
Once I had this url, I tried it in my browser and it redirected me to ** another url ** with an HTML5 mp3 player, which automatically played the song.
I got the idea to do this from this soundcloud doc:
http://developers.soundcloud.com/docs#playing
I then copied this url and mashed the code from my original question to the basic tutorial mentioned above (http://www.schillmania.com/projects/soundmanager2/demo/template/).
Final Code:
var is_playing = false;
$("#stream").live("click", function(){
soundManager.setup({
url: './swf/soundmanager2.swf',
onready: function() {
var mySound = soundManager.createSound({
id: 'aSound',
url: {**another url**},
autoplay: false
});
if (is_playing===false)
{
mySound.play();
is_playing = true;
}
else if (is_playing=== true)
{
mySound.stop();
is_playing = false;
}
},
ontimeout: function() {
// Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
}
});
});

Simply link the event which you would like to trigger the pause function to the "sound" object which is passed into SC.stream()'s callback function.
The form in the following code accepts a sound cloud link such as this one: https://soundcloud.com/djalmix-1/living-in-stereo-dj-almix (so paste that in to the form once the app is live and click load). Also you must provide your own client_id that soundcloud gives you when you register your app, this takes only a minute or so.
<!DOCTYPE html>
<html>
<head></head>
<body>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
function load_sound() {
var track_url = document.getElementById("sc_url").value;
SC.initialize({
client_id: 'client_id'
});
SC.get('/resolve', {url: track_url}, function(track) {
console.log("the track id is: " + track.id);
SC.stream("/tracks/" + track.id, function(sound) {
var is_playing = true;
sound.play();
document.getElementById("stream").onclick = function(){
if(is_playing === false){
sound.resume();
is_playing = true;
} else if(is_playing === true){
sound.pause();
is_playing = false;
}
};
});
});
}
</script>
<form>
<input id="sc_url" type="url">
<input type="button" onclick="load_sound();" value="load">
</form>
<button id="stream">pause/resume</button>
</body>
</html>