Skip to main content

Umbraco - Macro -XSLT - Flash Audio Player

Umbraco - Macro -XSLT - Flash Audio Player


To create a Flash based Audio Player for Umbraco, that will allow users to choose their own audio file, is easily done in 3 steps:

Step 1). Find a Flash Audio Player you like.

I used this one: http://flash-mp3-player.net/players/mini/generator/ , it is clean and simple and is used in the code below. 

There are a lot of others that are easily  integrated with the code below: http://savedelete.com/top-25-best-free-online-music-players-for-your-websites-or-blogs.html

Step 2). Upload the Audio Player to your site

Upload the Audio Player to your folder structure. In the XSLT below the file is being referenced in a folder called "audioplayer".

Step 3) Create a XSLT file with a relate Macro.

A: Paste in this code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library"
    exclude-result-prefixes="msxml umbraco.library">
<xsl:output method="xml"  omit-xml-declaration="yes"  />
<xsl:param name="currentPage"/>
<xsl:variable name="location" select="/macro/location"/>
<xsl:variable name="title" select="/macro/title"/>
<xsl:template match="/">

<h3><xsl:value-of select="/macro/title"/> </h3>
<br />
    <object type="application/x-shockwave-flash" data="/audioplayer/player_mp3_mini.swf" width="200" height="20">
       <param name="movie" value="/audioplayer/player_mp3_mini.swf" />
       <param name="bgcolor" value="#000000" />
       <param name="FlashVars" value="mp3={$location}" /> 
    </object>
<ul>
<li>You can download the audio file <a href="{$location}" title="">here</a>.</li>
</ul>
</xsl:template>
</xsl:stylesheet>


Explanation to the code above:
The code in green is declaring the paramaters that the user will enter - the title of the podcast and its location, for example "My Podcast", /media/12345/my-podcast.mp3

The code in Yellow is specific to the Flash Player I chose in Step 1.  I have simply replaced the location of an mp3 with a reference to the paramater "{$location}"


B: Add Paramaters to the Macro

1) Save your XSLT file.

2) Go to the Macro Section and in the new macro add the following 2 paramaters, all of which are of Type text:

Alias and Name:
  • location
  • title
Tick "Use In Editor"

3) Save the Macro

C: Using the Macro to Embedd the Audio on to the Page:

1) Upload a Audio file to Umbraco
2) Go to the umbraco content page you want to embedd the flash Audio on to

3) Click on the Macro button and select the new macro from the drop down.

4) For the location, paste in the URL of the Audio. Such as:
/media/1234/my-audio-file.mp3   (or an external url)

5) Enter the title of the file.

Comments

Popular posts from this blog

Create a .NET Contact Form that Gets the Last Url Visited in C# Can also be Used in Umbraco

This is a Simple Contact From done in C# .Net and also can be used in Umbraco.  Paste the code in to Visual Web Developer for a better view. The important bits are coment in the second file.  One of the Commented out lines highlights how to get the mailto address from an Umbraco field. The code Below includes the myContactForm.ascx.cs codebehind file and the myContactForm.ascx file. 1) The myContactForm.ascx file:  <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ContactFormforPublications.ascx.cs" Inherits="usercontrols_ContactFormPublications" %> <div class="contact-form" id="contactForm" runat="server">     <h3>Request a Publication</h3>     <div class='int'>         <form runat="server">         <asp:Panel DefaultButton="contactFormSubmit" runat="server">         <fieldset>             <div class='

Umbraco 7 - C# Razor - Passing a parameter variable from a Template to a Partial View.

Passing a parameter variable from a Template to a Partial View Example - Passing a Page Id to a Partial View. In the example below we are passing 3 page Ids (1090. 1091, 1092) to a partial view.  The Partial View will display the details for each of these nodes on a home page.  See final output below. 1) In your Template: @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1090}}) @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1091}}) @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1092}}) 2) The Partial View: @inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ var thisPageId = 1090; var stringPage = @ViewData["pageId"]; thisPageId = Convert.ToInt32(stringPage); } <div class="col-md-4"> <arti