Tag Archives: files

Play audio in an iOS app with Xamarin

This tutorial explains how to play audio files in the background in an iOS app. An audio file can play when a screen loads or when an event occurs (such as a button press or change in a variable’s value). The example app in this tutorial will play a sound when a button is pressed. We will also look at how to use the Vibrate function in an iPhone to make the phone vibrate as well as playing a sound.

Here is what this app will look like:

ia_app

Step 1 

Open Xamarin and click File > New Solution. Then select iOS App and SingleView App as the project template. Click Next.

ia1

Step 2

Give your new app a name and select a target iOS version. Click Next. On the following screen, confirm the project and solution name and then click Create.

ia2

Step 3

When the solution opens, right-click on the project folder. Select Add > New Folder.

ia3

Give the new folder the name Sounds.

ia3b

Step 4

Right-click on the new Sounds folder and select Add > Add files from folder.

ia4

Step 5

Navigate to the folder which contains the audio file(s) you wish to use in your app. Click Open.

ia4b

Step 6 

Select the audio files you wish to include in the project (for this example, we will use an MP3 file called mysound.mp3). Click OK.

ia5

Then select Copy the file to the directory and click OK. This file will be copied to the project’s Sounds folder. You should then be able to see the audio file in the Sounds folder within the project folder from the Solution panel.

ia5b

Step 7

Right-click on the audio file in the Sounds folder. Select Build Action and set to BundleResource (if this does not work during testing, try selecting Content instead).

ia6

Step 8

Open the Main.storyboard file. Change the View to your desired iPhone/iPad model. Drag three Button elements on to the screen as shown below. Give the first button a Name of playSoundButton and the text value ‘Play sound’. Give the second button a Name of playSoundVibrateButton and the text value ‘Play sound and vibrate’. Give the third button a Name of vibrateButton and the text value ‘Vibrate’. Save the file.

ia7
Click the image to see a larger version.

Step 9

Open the ViewController.cs file and add the following two highlighted lines of code. The first two highlighted lines allow us to access audio tools and lower-level classes. url defines where the location and name of the audio file, while mySound is the name of the variable holding the sound file.

ia8
Click the image to see a larger version.

Step 10

Now add the following two highlighted lines of code in the ViewDidLoad method. Here we define the location and filename of the audio file as well as directing the mySound variable to use this audio file. Replace mysound.mp3 with the name of your sound file.

ia9
Click the image to see a larger version.

Step 11 

Now create a TouchUpInside event for each of the three buttons in the ViewDidLoad method. Inside the new methods for each TouchUpInside event, add the lines of code shown below.

  • SystemSound.PlaySystemSound(); will just play the sound
  • SystemSound.PlayAlertSound(); will play the sound and vibrate the phone
  • SystemSound.Vibrate.PlaySystemSound(); will just vibrate the phone
ia10
Click the image to see a larger version.

That’s it! Now go and test the app!

PHP include and require functions

The PHP include and require functions are used to include other PHP files in a PHP file. For example, a webpage which needs to have a header, content section, and footer can be made into three PHP files – the main file can then include the header and the footer files in it. This is useful if you have PHP code that needs to be included in many pages across a site and can save time coding as well as reducing the risk of human error when repeating code.

The include and require functions work similarly but do have a key difference. The include function will include a file but the rest of the code will not break if the other file can’t be found or loaded. On the other hand, the require function is used when another file is required but will break the rest of the page if it can’t be found or loaded.

Watch the video below and then scroll down to see the sample code.

Sample code

There are a few files involved here. You can also download the background image and CSS code used for the template.

Step 1: Create an index.php file and add the following code.

<html>
<head>
  <title>Home page</title>
 	<meta charset="utf-8"/>
 	<link rel="stylesheet" href="theme.css" type="text/css"/>
<body>
  <?php include 'header.php'
  // can also use require which does the same thing as include
  // however, if using require and the required file is missing,
  // errors will result in none of the rest of the page loading whereas
  // include will not kill the rest of the page.
  ?>

  <div id="content">
 	<h2>Welcome to my website</h2>
 	<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
 	<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
  </div>

  <?php include 'footer.php'?>
</body>

</html>

Step 2: Create a header.php file and include the following code:

<html>
<head>
</head>
<body>
 
<div id="header">
 <h1>My website</h1>
</div>
 
<div id="nav">
  <ul>
     <li><a href="index.php">Home</a></li>
     <li><a href="about.php">About</a></li>
     <li><a href="products.php">Products</a></li>
     <li><a href="support.php">Support</a></li>
     <li><a href="contact.php">Contact us</a></li>
  </ul>
</div>
</body>
</html>

Step 3: Create a footer.php file and include the following code.

<html>
<head>
</head>
<body>
<div id="footer">
 Copyright....2015.
</div>
</body>
</html>

Step 4: Create a theme.css file and include the following code. Change the CSS styling as you wish.

#header{
 background-image:url("background.png");
 background-color:#334a94;
 height:80px;
 color:#FFFFFF;
 text-align:left;
 padding-left:20px;
 padding-top:10px;
 font-family:Arial;
}
 
#nav{
 background-color:#334a94;
 height:30px;
 padding:5px;
}
 
#content{
 width:500px;
 padding:10px;
}

h2{
  font-family:"Tahoma";
}

p{
  font-family:"Palatino Linotype";
}
 
#footer{
 background-color:#334a94;
 color:#FFFFFF;
 clear:both;
 text-align:center;
 padding:20px;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #334a94;
}

#nav li{
    display: inline;
}

li a {
    
  font-family:Calibri;
  font-size: 14pt;
  font-style:none;
    color: #FFFFFF;
    padding: 8px 16px 8px 16px;
    text-decoration: none;
}

li a:visited {
    background-color: #4CAF50;
    color: #FFFFFF;
}

li a:hover {
    background-color: #786ED4;
    color: #000000;
}

Step 5: Download this image and include it in the same folder along with the three PHP files and one CSS file. You can add more pages (eg. about.php or products.php) and include the header and footer in each file.

Adding video to a webpage

This video tutorial explains how to add a video to your webpage using the HTML5 video tag. With the HTML5 video tag, you can specify the height, width, source, and type of video file(s) you are working with as well as adding controls, autoplay, and loop features.

When adding videos, you will need to consider browser compatibility. The following browser accept these videos using the HTML5 video tag (this could change):

  • Internet Explorer: MP4
  • Chrome: MP4, WebM, Ogg
  • Firefox: MP4, WebM, Ogg
  • Safari: MP4
  • Opera: MP4, WebM, Ogg

The safest bet is to use MP4 but it is a good idea to provide multiple file types. Keep in mind that the autoplay feature is currently not supported in Safari or Opera browsers and does not work on mobile devices such as the iPad or iPhone (this could also change).

When you add a video to your page you can specify the width and height, if you would like to auto-play the video, loop the video and if you would like to show or hide the video player controls. The video player controls look like this in Chrome browser:

Watch the video below and then scroll down to view the sample code.

The sample code below shows how to use the video tag. You might want to remove the autoplay, loop or controls attributes as they are all enabled in the example below. You will also need to change the width and height to suit your video.

<!DOCTYPE html>
<html>
<head>
 <title>Adding video to a webpage</title>
 <meta charset="utf-8"/>
</head>

<body>
 <video width="550" height="400" controls autoplay loop>
 <source src="your_video_file.mp4" type="video/mp4"/>
 Your browser doesn't support the HTML video tag. Consider upgrading to a newer browser.
 </video>
</body>

</html>

Adding audio to a webpage

This tutorial explains how to add audio to a webpage using the HTML5 audio tag. Because this tag is new to HTML5, it may not be supported in some older browsers. It is also important to note that some audio file types may not be supported in different browsers.

At the time of writing this tutorial, the following browsers support these file types using the HTML5 audio tag:

  • Chrome: MP3, WAV, OGG
  • Internet Explorer: MP3
  • Firefox: MP3, WAV, OGG
  • Safari: MP3, WAV
  • Opera: MP3, WAV, OGG

Using MP3 files for audio would be the safest bet as it is supported by all the major browsers now. For this tutorial, I will demonstrate using the HTML5 audio tag with an MP3 file. You can get free audio files from a range of sources including the YouTube Audio Library and Freesound.

When you add audio to a page you can specify whether you want to allow the audio to automatically play, loop over, and if you also want to show or hide the audio player controls which will look like this:

audioplayer

The video below shows how you can use the HTML5 audio tag to add an audio file to a webpage. It also shows how to add controls and how to autoplay and loop audio files. Watch the video below and then scroll down to see the sample code.

The sample code below shows how to add an audio file to a webpage. All you need to do is replace the filename/filetypes with whatever you are using. You might also like to remove the autoplay, loop, or control features. Note that all three of these features are enabled in the example below.

<!DOCTYPE html>
<html>
<head>
 <title>Adding audio to a webpage</title>
 <meta charset="utf-8"/>
</head>

<body>
<audio controls autoplay loop>
 <source src="your_audio_file.mp3" type="audio/mpeg"/>
 Your browser does not support the HTML5 audio tag. Consider updating to a newer browser.
</audio>
</body>

</html>

This tutorial video includes a portion of free music from the YouTube Audio Library. Music from the audio library can be used in your videos by you as long as you do not make it available, distribute or perform the music separately from your videos into which you have incorporated the music files, and as long as the music is not used in an illegal manner or in connection with any illegal content. Always read the terms and conditions.