1

以下代码在 Chrome 和 Firefox 中运行良好，但在 Safari 中运行良好。如果我移动它会在 Safari 中完美播放

inst.play(document.getElementById("abc").value, function() {});

正如您在评论中看到的那样，超出了 $.get 。

关于可能导致这种情况的 Safari 差异的任何想法？

<!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>

这是显示问题的非常简化的代码，而不是显示用例，这需要 $.get 读取包含文本区域中信息的外部文件。

测试位置是https://gospelriver.com/abcSafari/indexSafari.html

我尝试将 $.get 更改为 ajax 以及使用 $.noConflict(); 两者都没有任何区别。我没主意了！

编辑：感谢有用的评论和链接，解决方案如下：

    //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() {});
4

0 回答 0