I did one for iOS native with Xcode, Android native with Android Studio, and a web-based solution using Visual Studio with .NET, and now I’m going to create a cross-platform soundboard using Xamarin Forms (for iOS, Android, and UWP). I plan to go through the entire process in a way that anyone new to Xamarin development will be able to follow step-by-step and have a working application by the end of these posts.\u00a0 An important thing to bear in mind with is that the code probably won’t be perfect and there will most likely be multiple different ways to reach the same goal (and some of the other ways could be better than the one I’ve chosen).<\/p>\n
We’ll start out in Visual Studio and create a project of type Visual C#<\/strong> -> Cross-Platform<\/strong> -> Cross Platform App (Xamarin)<\/strong><\/p>\n On the next project wizard screen, we’ll create it as a Blank App<\/b> using Xamarin.Forms<\/b> and with a Portable Class Library (PCL)<\/b> (NOTE – I would normally recommend going with a Master Detail project and leveraging MVVM, but I want to keep this one very simple and basic).<\/p>\n At this point, Visual Studio will churn for a bit as it creates all the necessary projects for your new Xamarin.Forms solution, relax and let it do its thing. Eventually, you will be prompted to select the version details for the Universal Windows Project (UWP), I’ll leave them at the defaults it pre-selects for me.<\/p>\n Once you select your targets, Visual Studio will do some more processing to finishing setting everything up for you.\u00a0When it is finished, you’ll be presented with a solution that contains your PCL, Android, iOS, and UWP projects.<\/p>\n At this point, I’m going to deviate for a moment to discuss a key bit of knowledge that you’ll want to have at least a passing understanding of if you plan to do much with Xamarin and cross-platform development: the DependencyService<\/a>.<\/p>\n That link goes out to true Xamarin documentation to give a full breakdown of what the DependencyService is and how you should use it, I highly recommend reading through it so you have a good grasp of the concepts. We’ll be making use of it in this application, which will give you a good real-world example of it, but the key elements are:<\/p>\n We’ll start with the easiest interface first, because it’s the easiest interface… In the case of the soundboard, the simplest interface will be the one that handles playing a sound file. Right click on the Portable<\/b> project at the top of your solution and then select Add<\/b> -> Add New Item<\/b>. From the list of templates, select Visual C#<\/b> -> Interface<\/b> and give it a name of ISoundPlayer.cs<\/b>.<\/p>\n Add an accessor for the interface to make it public, and give it a single void method named PlaySoundFile<\/strong>\u00a0that takes a single string parameter named fileName.<\/strong><\/p>\n That’s it for the interface, told you it would be easy!\u00a0 Now we need to create a class for each platform that implements the interface.\u00a0 For our purposes here, we’re going to assume that we will be including the sound files in each of the platforms native ways:\u00a0 Android and UWP will have them as assets and iOS will have them as bundle resources.\u00a0 This means that we’ll end up having multiple copies of them in our solution, and there are options available to prevent having to do that, but that will be for another post.<\/p>\n Going from top to bottom in our solution, we’ll create the Android implementation first (lucky for us it is also the simplest of the three).\u00a0 Right click on the Android project in the solution and select\u00a0Add<\/strong> ->\u00a0Class\u00a0<\/strong>and give it the name\u00a0SoundPlayerImplementation.<\/strong><\/p>\n We want to add the public accessor to the new class, wire it up to the interface we created in the PCL (ISoundPlayer<\/strong>), and then implement the audio playback functionality for Android.\u00a0 Rather than use words to explain the implementation, I’ll just provided the actual code with a bunch of comments included.<\/p>\n Key items to note are the metadata instruction that registers our class to the DependencyService and the implementation of the interface we created in the PCL.<\/p>\n Next, we’ll create the implementation file for iOS – right click on the iOS project then choose\u00a0Add<\/strong> ->\u00a0Class\u00a0<\/strong>and give it the same name of\u00a0SoundPlayerImplementation<\/strong> (the namespaces will take care of keeping them unique for us across the solution).<\/p>\n Just like with the Android implementation, we want to add the public accessor to the new class, wire it up to the interface we created in the PCL (ISoundPlayer<\/strong>), and then implement the audio playback functionality for iOS.\u00a0 There is a little bit more to the code in iOS, mainly because of how we will instantiate the audio player from the resource bundle.\u00a0 The code and comments will explain it better than I could type it back out.<\/p>\n Finally, we’ll create the implementation class for UWP\u00a0 – right click on the Universal Windows project then choose\u00a0Add<\/strong>\u00a0->\u00a0Class\u00a0<\/strong>and give it the same name of\u00a0SoundPlayerImplementation.<\/strong><\/p>\n All the same words that I used about Android and iOS up above apply here, and then the code explains the rest.<\/p>\n Before we go any further with the soundboard, let’s allow ourselves a little satisfaction by testing out the SoundPlayer implementations and hearing some sweet, melodious sounds on each of the platforms.\u00a0 This will require a little throw-away work, but what we do here will inform the code we write for the real soundboard logic later.\u00a0 The first thing to do will be to add an MP3 file to each of the platform-specific projects, we’ll do this by clicking on\u00a0Add\u00a0<\/strong>->\u00a0Existing Item<\/strong> and then selecting an MP3 file from your computer in each of the following locations:<\/p>\n Adding the MP3 file at these locations will automagically<\/em> set the Build Action to the correct type so that the files go out correctly when we deploy to each platform.\u00a0 To trigger the DependencyService and play the MP3 file, we’ll need to go back up to the PCL and edit the\u00a0MainPage.xaml\u00a0<\/strong>file to include a button.\u00a0 For this test, just remove the generic label that was included and stick in a button that has a\u00a0Clicked<\/strong> event<\/p>\n Now, head to the code-behind file for the XAML (hotkey F7, or right-click in the page and select View Code, or open MainPage.xaml.cs from Solution Explorer) and add in the SoundButton_Clicked event:<\/p>\n And that’s it, now you can run it on each of your platforms and you’ll be presented with a full-screen button with the text\u00a0Sound<\/strong> on it.\u00a0 Clicking that button on any of the platforms will cause it to play the MP3 file that you added to your project.<\/p>\n That’s it for part 1, you should now have the base project created and be able to run a program that will display a gigantic button that plays an embedded MP3 file upon being clicked on each of the target platforms!<\/p>\n -CubicleNinja<\/p>\n","protected":false},"excerpt":{"rendered":" One of the things I enjoy doing when I’m going to jump into a new development area is to create a soundboard-type application. I like to do this for a few reasons: I like playing with soundboards It lets me work with media playback on the platform(s) It lets me work with file IO on … Continue reading “Creating a Cross-Platform Soundboard with Xamarin Forms – Part 1”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3,6,9,10,12],"tags":[14,30,40,42],"class_list":["post-240","post","type-post","status-publish","format-standard","hentry","category-net","category-android","category-ios","category-mobile","category-uwp","category-xamarin","tag-android","tag-ios","tag-uwp","tag-xamarin"],"_links":{"self":[{"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=\/wp\/v2\/posts\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=240"}],"version-history":[{"count":0,"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=\/wp\/v2\/posts\/240\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.cubicleninja.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Soundboard_1\"](\"http:\/\/blog.cubicleninja.com\/wp-content\/uploads\/2017\/10\/Soundboard_1.png\")
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n\n
<\/a><\/p>\nnamespace XamarinSoundboard\n{\n public interface ISoundPlayer\n {\n void PlaySoundFile(string fileName);\n }\n}<\/pre>\n<\/a><\/p>\nusing Android.Media;\nusing Xamarin.Forms;\nusing XamarinSoundboard.Droid;\n\n[assembly: Dependency(typeof(SoundPlayerImplementation))]\nnamespace XamarinSoundboard.Droid\n{\n public class SoundPlayerImplementation : ISoundPlayer\n {\n public SoundPlayerImplementation()\n {\n\n }\n\n public void PlaySoundFile(string fileName)\n {\n \/\/ Create a new Android MediaPlayer object\n \/\/ In android, it will remain in scope while it is playing, so we can create and instantiate it inside the method\n var player = new MediaPlayer();\n \/\/ Retrieve an asset file descriptor to the file name passed in out of the application assets\n var fd = global::Android.App.Application.Context.Assets.OpenFd(fileName);\n\n \/\/ Add a delegate handler that fires once the file is fully prepared in the media player\n \/\/ that will start the sound playback\n player.Prepared += (s, e) =>\n {\n player.Start();\n };\n\n \/\/ Wire up the datasource using the FileDescriptor, start offset of the file, and the length of the file\n player.SetDataSource(fd.FileDescriptor, fd.StartOffset, fd.Length);\n \/\/ Close out the file descriptor\n fd.Close();\n \/\/ instruct the MediaPlayer to prepare for playback\n player.Prepare();\n }\n }\n}<\/pre>\n<\/a><\/p>\nusing Xamarin.Forms;\nusing XamarinSoundboard.iOS;\nusing Foundation;\nusing System.IO;\nusing AVFoundation;\n\n[assembly: Dependency(typeof(SoundPlayerImplementation))]\nnamespace XamarinSoundboard.iOS\n{\n public class SoundPlayerImplementation : ISoundPlayer\n {\n \/\/ Need to have the iOS audio player scoped outside of the method so the playback can persist\n private AVAudioPlayer audioPlayer;\n\n public SoundPlayerImplementation()\n {\n\n }\n\n public void PlaySoundFile(string fileName)\n {\n \/\/ Retrieve the path to the file where it is housed within the bundle resources\n string sFilePath = NSBundle.MainBundle.PathForResource(Path.GetFileNameWithoutExtension(fileName), Path.GetExtension(fileName));\n \/\/ Create a URL for the file inside the bundle resources - we do this for simplicity in play back\n var url = NSUrl.FromString(((NSString)sFilePath).CreateStringByAddingPercentEscapes(NSStringEncoding.UTF8));\n \n \/\/ Since the audio player is scoped outside of the method, we need to handle what to do if it is already playing\n \/\/ a sound when they trigger another to play\n if (audioPlayer != null)\n {\n audioPlayer.Stop();\n audioPlayer.Dispose();\n }\n \n \/\/ Instantiate the AudioPlayer from the URL we created above\n audioPlayer = AVAudioPlayer.FromUrl(url);\n\n \/\/ Sanity check to make sure it was able to properly create the player\n if (audioPlayer != null)\n {\n \/\/ Set it for a single playback\n audioPlayer.NumberOfLoops = 0;\n\n \/\/ Add a delegate to perform some clean-up after it finishes playing\n audioPlayer.FinishedPlaying += delegate\n {\n audioPlayer = null;\n };\n\n \/\/ Start playing the sound file\n audioPlayer.Play();\n }\n }\n }\n}<\/pre>\n<\/a><\/p>\nusing System;\nusing XamarinSoundboard.UWP;\nusing Windows.UI.Xaml.Controls;\nusing Xamarin.Forms;\n\n[assembly: Dependency(typeof(SoundPlayerImplementation))]\nnamespace XamarinSoundboard.UWP\n{\n public class SoundPlayerImplementation : ISoundPlayer\n {\n \/\/ Need to have the UWP media element scoped outside of the method so the playback can persist\n MediaElement el;\n\n public SoundPlayerImplementation()\n {\n\n }\n\n public async void PlaySoundFile(string fileName)\n {\n \/\/ Retrieve a storage folder for the Assets folder of the application\n Windows.Storage.StorageFolder folder = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync(\"Assets\");\n \/\/ Retrieve the storage file from the assets folder\n Windows.Storage.StorageFile file = await folder.GetFileAsync(fileName);\n \/\/ Open the file stream from the storage file\n Windows.Storage.Streams.IRandomAccessStream stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);\n\n \/\/ Since the audio player is scoped outside of the method, we need to handle what to do if it is already playing\n \/\/ a sound when they trigger another to play\n if (el != null)\n {\n el.Stop();\n el = null;\n }\n\n \/\/ Instantiate a new MediaElement\n el = new MediaElement();\n \/\/ Instruct the media element to load the storage file stream\n el.SetSource(stream, file.ContentType);\n \/\/ Make sure the media element isn't muted\n el.IsMuted = false;\n \/\/ Set the media element volume\n el.Volume = 1;\n \/\/ Add a delegate to perform some clean-up after it finishes playing\n el.MediaEnded += (sender, e) =>\n {\n ((MediaElement)sender).Stop();\n sender = null;\n };\n\n \/\/ Ensure we start at the beginning of the sound file\n el.Position = new TimeSpan(0, 0, 0);\n \/\/ Start playing the sound file\n el.Play(); \n }\n }\n}\n<\/pre>\n\n
<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<ContentPage xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n xmlns:local=\"clr-namespace:XamarinSoundboard\"\n x:Class=\"XamarinSoundboard.MainPage\">\n\n <Button x:Name=\"SoundButton\" Text=\"Sound\" Clicked=\"SoundButton_Clicked\"><\/Button>\n\n<\/ContentPage><\/pre>\n
private void SoundButton_Clicked(object sender, EventArgs e)\n {\n \/\/ Make use of the dependency service to call the platform specific implementation of our SoundPlayer\n \/\/ Make sure to put in the actual file name of your MP3 file -- It is case sensitive!\n DependencyService.Get<ISoundPlayer>().PlaySoundFile(\"Awesome.mp3\");\n }<\/pre>\n