Safari musical.js (WebAudioAPI) execution issue within $.get [duplicate] - javascript

This question already has answers here:
Audio plays in Chrome but not Safari
(1 answer)
Programmatically play video with sound on Safari and Mobile Chrome
(2 answers)
Closed 3 years ago.
The following code plays fine in Chrome & Firefox but not Safari.
It plays perfectly in Safari if I move
inst.play(document.getElementById("abc").value, function() {});
out of $.get as you see in comments.
Any ideas as to differences in Safari that might cause this?
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="orig_musical.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body style="font-family:Arial;padding:36px;">
<h2>Play ABC<span></span></h2>
<a onclick="playABC('https://gospelriver.com/dummylink/Music/BHB_Music/green_fields.abc');"><u>Click to play with musical.js</u></a><br>
<a onclick="inst.silence();"><u>Click to stop musical.js</u></a><br><br>
<textarea name="abc1" id="abc" rows="10" cols="100">
X:1
T:Green Fields (De Fleury)
T:8.8.8.8 D
C:Johann Sebastian Bach, arr. by Lewis Edson
L:1/8
Q:100
M:6/8
K:G
[G3D3]| [GD]D[GD] [BD][GD][BG]| [d3G3] ||
[c3G3]| [BG][dG][BG] [AF][GE][AF]| G3 ||
[G3D3]| [GD]D[GD] [BD][GD][BG]| [d3G3] ||
[c3G3]| [BG][dG][BG] [AF][GE][AF]| G3 ||
[d3G3]| [dG][BG][dG] [dG][BG][dG]| [e3G3] ||
[c3E3]| [BD][cD][dD] [dG][cG][BG]| [A3F3] ||
[G3D3]| [GD]D[GD] [BD][GD][BG]| [d3G3] ||
[c3G3]| [BG][dG][BG] [AF][GE][AF]| G3 |]
</textarea>
<hr />
<p>abcjs by Paul Rosen</p>
<p>For more information, see <a href="https://github.com/paulrosen/abcjs" >the project page</a>.</p>
<p>This web page is a demonstration of the use of
musical.js with a plain script tag.
For a song that uses more ABC notation features, see minuet.</p>
<script>
// Select a timbre that sounds like a piano.
var instrumentType = "piano";
var inst = new Instrument({wave: instrumentType, detune: 0});
//play song
function playABC(urlConverted) {
//playback works in Safari if played here.
//inst.play(document.getElementById("abc").value, function() {});
$.get(urlConverted,function(data){
//playback fails in Safari if played here
inst.play(document.getElementById("abc").value, function() {});
console.log('arrived here');
},'text')
.fail(function() {
console.log('failed');
});
}
</script>
</body></html>
This is very simplified code to show the issue, not to show the use case, which requires $.get to read the external file which contains the info in the text area.
Test location is https://gospelriver.com/abcSafari/indexSafari.html
I have tried changing $.get to ajax as well as using $.noConflict(); Neither make any difference. I'm out of ideas!
Edit: Thanks to the helpful comments and links, the solution was as follows:
//insert note, immediately silenced, to keep connection to the original play event for Safari
inst.play("X:1\nL:1/8\nQ:100\nM:6/8\nK:G\n[a4]|", function() {});
inst.silence();
$.get(urlConverted,function(data){
//playback fails in Safari if played here
inst.play(document.getElementById("abc").value, function() {});

Related

JavaScript function works only in Internet Explorer (in ASP.NET WebForms)

in aspx page (WebForms) I have a JavaScript function that works only in Internet Explorer and not in Edge/Chrome.
This one:
function ChoosePharmacy()
{
var result = window.showModalDialog('search_pharmacy.aspx', window,"dialogWidth:800px;dialogHeight:600px;scroll: no;")
if (result != null)
document.getElementById('hIdPharmacy').value = result;
}
This should open a pop-up window (with an aspx page inside), but because is
an old legacy application, works only in Internet Explore, and now that users have move
to Edge, has stop working.
Do someone has idea why?
Thanks a lot in advance.
Luis
From your description, I understand that you would like to know why your JS code is not working with modern browsers like Chrome or Edge.
If we refer to the document for Window.showModalDialog(), we could notice that it is deprecated and is not recommended to use on the sites.
As suggested by Elder, dialog is a replacement for window.showModalDialog().
If it is difficult to implement in your code then as an alternative, you could use the ShowModalDialog Polyfill.
You just need to add a reference to ShowModalDialog Polyfill in your code and your code will start working without any changes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://unpkg.com/showmodaldialog"></script>
<script>
function ChoosePharmacy()
{
var result = window.showModalDialog('index.html', window,"dialogWidth:300px;dialogHeight:200px;scroll: no;")
if (result != null)
document.getElementById('hIdPharmacy').value = result;
}
</script>
</head>
<body>
<h1>Example for ShowModalDialog Polyfill</h1>
<br>
<button onclick="ChoosePharmacy()">Call ChoosePharmacy Function</button>
</body>
</html>
Output in the MS Edge browser:

Why wont JQuery hide/show elements on my web page and how do I fix it? [duplicate]

This question already has answers here:
Is $(document).ready necessary?
(5 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I'm having a problem that has just now started happening for no reason. I'm playing around with a block that detects whether you are using Adblock. It sets a variable, var canRunAds = true; in a file titled ads.js which is not really ads but all adblockers will block it regardless. Next, somewhere in index.html tests to see if canRunAds is defined or not like this:
<DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../javascript/ads.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
if( window.canRunAds === undefined ){
$("#adblock_off").hide();
$(".adblock_off").hide();
console.debug("adblock enabled");
}
else {
$("#adblock_on").hide();
$(".adblock_on").hide();
console.debug("adblock disabled/nonexistant");
}
</script>
<div>
<img src="../images/adblock_off.png" id="adblock_off"></img>
<img src="../images/adblock_on.png" id="adblock_on"></img>
<p class="adblock_off">Thanks for disabling your adblock!</p>
<p class="adblock_on">Disable your adblock, no ads here!<p>
</div>
</body>
This has always worked for me, however it has stopped working. The script runs the console.debug and it shows up in the console, but the elements wont hide. Any explaination?
PS: This is all documented at this GitHub repo

<script> and JavaScript not working in HTML file for all browsers after XMLHTTPREQUEST

Hello I am new to JavaScript. I have looked through other posts but I cannot resolve my issue.
Earlier I was attempting to play around with the following script found here (How to read text file in JavaScript).
I got it working successfully SEVERAL times:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title>Read File (via AJAX)</title>
<script type="text/javascript">
var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');
function loadFile() {
reader.open('get', 'test.txt', true);
reader.onreadystatechange = displayContents;
reader.send(null);
}
function displayContents() {
if(reader.readyState==4) {
var el = document.getElementById('main');
el.innerHTML = reader.responseText;
}
}
</script>
</head>
<body>
<div id="container">
<input type="button" value="test.txt" onclick="loadFile()" />
<div id="main">
</div>
</div>
</body>
</html>
While testing this script, all of a sudden it stopped working! I have assured that my content blockers are disabled and javascript is enabled on my web browsers. I am not sure if I locked up my web browsers ability to use javascript while using this XMLHTTPREQUEST or possibly overloaded it. I even tried inserting a reader.abort() function to possibly close the request if it was still open somehow. I tried inserting alert() functions to troubleshoot that did not work. I tried restarting my computer that did not work. I am using a MAC and have tried the latest versions of Firefox, Chrome, and Safari which all do not work with javascript now.
It is so bad that I CAN'T even get this simple javascript example to work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type=“text/javascript”>
document.write(“<h1>This is a test</h1>”);
</script>
</head>
<body>
</body>
</html>
PLEASE HELP! I don't know what I did or how to fix the issue.
Above script works only if you're loading the text file from a server. Make sure the file is located in the same place as your html file on the server and load the page with your server address. Most likely thing you're doing wrong is you're trying to access client's file. It doesn't work because that will be HUGE security breach, only the client can send you a file to read (If that is your intended purpose, then I advise you to use FileReader, example code can be found here).
About your second script, you're using “ instead of ".

Audio object not playing in callbacks on mobile devices

It seems to me that the Audio object can not be easily played inside a JavaScript callback when running on a mobile device. The code below shows an onload function which, on a PC, plays the sound when the web page is loaded, but on Android phones plays nothing.
My uninformed guess is that the callback returns before the Audio object starts to play, and thus, for some deep reason, dies.
Is there any way over this? In the full version the JavaScript would read the sound to play from the URL.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Play Me</title>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green;font-size:50px}
</style>
</head>
<body onload="playMySound()">
<P>
PLAY ME
<button onclick="playMySound()">sound me</button>
</P>
<br>
<script>
var mySound ;
function playMySound () {
var soundUrl = "http://www.letiketa.com/myapp/sound.ashx?sound=sound1" ;
var mySound = new Audio(soundUrl);
// Actually play the sound
mySound.play() ;
}
</script>
The button plays the sound correctly, on all devices and I suppose that is a callback...? Is there something special about the onload callback?
Argh, it is all to do with the fact that on mobile devices, currently, HTML5 disallows sounds to be played unless the user has done some input, presumably saying "I allow you to play sounds." The latest Firefox browser, V34 anyway, seems to have lifted the restrictions and all works as it should.
There is a fix in Chrome too, you need to, in the address bar, goto "about:flags" and find the "gesture required" option, disabling it.
After all this the program which I wrote two days ago now works...

Add HTML when a certain checkbox is checked

I want to add HTML to a page a certain checkbox is clicked (right now it's Reddit's 'Remember Me' checkbox, but in the future I'm want it to work with more checkboxes). I have made this content script, but I have no idea if it's doing anything to the opened chrome tab.
\\content_script.js
$(document).ready(function() {
var inputTable = document.getElementByTagName('input');
for(var i=0; i<inputTable.length; i++){
if((inputTable[i].getAttribute('type')=='checkbox') && (inputTable[i].getAttribute('name')=='rem')){
var rememberMe = inputTable[i];
}
}
document.addEventListener('DOMContentLoaded', function () {
rememberMe.addEventListener('change', changeHandler);
});
}
function changeHandler(){
if(rememberMe.checked){
var remTrack = chrome.extension.getURL ("rememberme.htm");
document.body.insertBefore (remTrack, document.body.firstChild);
}
else{
}
}
rememberme.htm is the html that I want to add containing the mp3 that I want to play (Will this work if the page isn't necessarily in HTML5?).
<!DOCTYPE html>
<html><head>
<title>Remember Me</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="HelloWorld.js"></script>
</head><body>
<audio autoplay loop>
<source src="remember.mp3" type="audio/mpeg">
</audio>
</body></html>
From what I've been reading it seems like I should just make the content script call whatever javascript that I want the open chrome tab to run, but I don't know how to do this while also inserting HTML into the open chrome tab. Any help is appreciated, and if the tag won't work if the page is not in HTML5 then what is the easiest way to play the mp3 in javascript?
Reddit is my favorite page, I guess that Redditors should stick together, so here's your script refactored.
It appends a track with 'God Save the Queen' played by United States Navy Band to Reddit homepage after clicking remember me button. When specifying audio source you need to give an url where the track is located, just like with images. You also don't need to add head and body, and the way you are fetching your html it is mistaken, you're actually getting only an url not html of your extension.
window.onload = main();
function main() {
var elem = document.getElementById('rem-login-main');
elem = addEventListener('change',changeHandler);
}
function changeHandler () {
var yourAudio = document.createElement('audio');
yourAudio.src = "http://upload.wikimedia.org/wikipedia/commons/d/de/United_States_Navy_Band_-_God_Save_the_Queen.ogg";
yourAudio.controls = true;
yourAudio.autoplay = true;
var parentNode = document.getElementById('header');
parentNode.insertBefore(yourAudio);
}
To test it go to Reddit, click F12, open chrome browser devtools console, within devtools go to tab sources, find tab snippets, right click, create new snippet, copy paste this code, save it, click play button on the right (it says 'run snippet' when you hover over it). If you want to make it an extension you need manifest.json.
Hope it works, don't remember to upvote or accept an answer if you find it useful.

Categories

Resources