Mp3 single play on web page with JavaScript and Cookies

As in my prior post, I had another web site that played media every time someone entered the site,  but this time it was an MP3 file playing using a HTML5 audio player.

So, I adapted the script developed for the YouTube single play purpose to the mp3 HTML5 purpose stated above. I won’t go into specifics since all of that is covered in that article. If you have need for a script like this to limit playback of an mp3 file to once every hour on visiting a page then grab this code and make it work! Enjoy!

<audio controls id=”audioframe” autoplay=””>
<source src=”/audio/somefile.mp3
type=”audio/mpeg”>Your browser does not support the audio element.
</audio>

<script language=”javascript”>
// Autoplay on first load and then expire in one hour on cookie.
// Author: J.F. Almada

// Set the video to play here
var autoplay = “”;
var now = new Date();
var time = now.getTime();
// Expire the cookie in one hour
var expireTime = time + 1000*3600;

if (document.cookie.length == 0 || document.cookie.indexOf(“AUDIOCOOKIENAMEHERE=”) == -1) {
// Set the expiration
now.setTime(expireTime);
// Set the cookie with it’s autoexpiration
document.cookie = ‘AUDIOCOOKIENAMEHERE=true;expires=’+now.toGMTString()+’;path=/’;

autoplay += ‘autoplay’; // append an autoplay tag to the video URL
}
// For debugging – Uncomment to view the setting
// alert(autoplay);

// Pass the link value to the Iframe
document.getElementById(“audioframe”).autoplay = autoplay; // set the iframe autoplay

</script>

Adding YouTube JavaScript For Autoplay

I had a problem on one of the sites I manage where I needed to play a YouTube video once when the page loads but I had to have it only play the first time the viewer got to the page. Subsequent visits to the page should not play the video but I wanted the visitor to have the video play once again the next time they visit the site at some reasonable point in the future. So… I decided on a JavaScript and a cookie to get the job done.

So I hit Google and found a good starter script that sort of worked and decided to modify it to my liking.

The problem was that the code set a cookie that didn’t expire the way I liked. I wanted it to expire one hour from the time of the first visit, after creating the cookie and setting the expiration time one hour from the time of the first visit.

Lets walk through the code – It uses a standard “iframe” to play the video and the JavaScript uses a id named “videoframe” to link it up with the script to control the autoplay.

<iframe title=”YouTube video player”
id=”videoframe” width=”560″ height=”315″
src=”” frameborder=”0″ allowfullscreen>
</iframe>

The next code to add will be the JavaScript and we need to set a few parameters to fit it to our need. I have highlighted the sections you should change to fit your site needs, specifically the video URL and cookie name.

The code I added was to use the current date and time to expire the cookie in one hour. Other than that simple set of modifications, the script is similar to the original version.

<script language=”javascript”>
// Autoplay on first load and then expire in one hour on cookie.

// Set the video to play here
var link = “https://www.youtube.com/embed/-C_3eYj-pOM“;
var now = new Date();
var time = now.getTime();
// Expire the cookie in one hour
var expireTime = time + 1000*3600;

if (document.cookie.length == 0 || document.cookie.indexOf(“COOKIENAME=”) == -1) {
// Set the expiration
now.setTime(expireTime);
// Set the cookie with it’s autoexpiration
document.cookie = ‘COOKIENAME=true;expires=’+now.toGMTString()+’;path=/’;

link += “?autoplay=1”; // append an autoplay tag to the video URL
}
// For debugging – Uncomment to view the setting
// alert(link);

// Pass the link value to the Iframe
document.getElementById(“videoframe”).src = link; // set the iframe src

</script>

That’s it! Just modify what you need to and you’ll have a script that will expire the cookie in one hour and which will play the video once on the first page visit but not thereafter until one hour expires!

Enjoy! — Jon

Fall is here and Light5Media is humming along…

Much has been going on and with the arrival of the first rains of fall, California’s weather has gone from warm to distinctly cool.

I’m working hard on the business and weekly voice-overs and video shoots are part of the routine. I’ve learned a lot about the business of producing content and how YouTube works and am keeping my focus on what is important.

I’ve been getting into animation (in a very primitive way), but they came out good despite my initial thoughts of giving up on it in the following video.

Light5Media is one of the two YouTube channels I am throwing my efforts into and I am not going to quit. This work is paying off and staying the course is the answer.

The studio continues to evolve and improve, with the addition of new hardware to improve our vocals and deliver a better audio product. While voice-overs are an important part of the business, I’m keeping my eye on bigger fish and staying on-mission.