1

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
<a href="https://github.com/PencilCode/musical.js">musical.js</a> with a plain script tag.
For a song that uses more ABC notation features, see <a href="https://rawgit.com/PencilCode/musical.js/master/test/demo/minuet.html">minuet</a>.</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() {});
Nathan
  • 67
  • 8
  • 1
    It looks like some kind of security restriction, only playing audio in direct response to a user action. Doing it in the AJAX callback function loses the connection to the original user event. – Barmar Aug 13 '19 at 00:08
  • This is similar to the way popup blockers work, and is probably intended to prevent autoplay. But it's surprising there's no log message saying that it's being ignored. – Barmar Aug 13 '19 at 00:09
  • Thank you so much! No idea how I would have figured this out without the tip. Turns out I had to actually play a note, not a rest, but I can silence it immediately so you don't hear it. Am I supposed to post my solution code after my question? – Nathan Aug 13 '19 at 02:37
  • No need to post an answer here too, your question is a duplicate, This means that users that will face the same issue will also be able to find the solution by reading the answers there. However, your question is still very useful as a "sign-post", that is, to redirect the ones that will face this issue, with different wordings than in the duplicates. – Kaiido Aug 13 '19 at 02:55

0 Answers0