For those who want to use AlphaTab on iOS (a similar solution exists for Android) and run everything locally with no connection, use a UIWebView and import the needed javascript files, font files, and any css you want. Your project directory should look like this:

Also make sure all of your files in the alphatab folder are copied over to your app under Build Phases > Copy Bundle Resources:

Then in your html file, make sure to put relative paths to all of the files so they can be loaded from the bundle. Here's a barebones example HTML:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/AlphaTab.min.js"></script>
  <script type="text/javascript" src="js/jquery.alphaTab.js"></script>

  <script type='text/javascript'>
    $(window).on('load', function() {
        $('#alphaTab').alphaTab(); 
    }); 
  </script>
</head>
<body>
  <h2>AlphaTab Test</h2>
  <div id="alphaTab" data-tex="true">
    \title "The Greatest Song In The World"
    \artist "Greg Burlet"
    \tempo 90
    .
    :4 2.3 4.4 2.2 3.4
  </div>
</body>
</html>

Then in your ViewController:

@IBOutlet weak var webView: UIWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let alphaTabURL = Bundle.main.url(forResource: "alphatab", withExtension: "html", subdirectory: "alphatab")
        let request = URLRequest(url: alphaTabURL!)
        webView.loadRequest(request)
    }

The result:

Note that this doesn't open up the page in an installed web browser on the phone (eg., Safari, Chrome) but renders right in your app.

Maybe @Danielku15 has a different or better approach, but this seems to be working well for me. Hopefully that helps someone out there!

When will there be support for Android and iOS? #75

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions