Using an iFrame for persistent audio.

By paul_constantine on 23 Jul 2019 at 12:42 UTC

Hi all,

I am looking for a functionality that does not seem to exist - at least I did not find any working solution. All the modules I tried did not check if a user is authenticated or could not get rid of the iFrame upon logging off (thus adding another iFrame each time I log on and off).

I need a function that loads an iFrame (audio player + Drupal website) when a user is authenticated. Likewise, that module would load just the drupal website without the iframe audio player when a user logs off. The audio player should only be accessible for authenticated users!

I found modules that will load a certain page on login, but they can not load the simple page without the iFrame upon logging off because they lack the function to define a target for the website. And they also would not stop an unauthenticated user from accessing the iFrame directly via a deep or direct link.

Does anyone have any ideas how to achieve this in Drupal 7?

Kind regards,

Paul

Comments

You can try the other

wombatbuddy commented 23 July 2019 at 22:47

You can try the other approach.
The main idea is to create a block with the audio player and restrict access for this block for anonymous users.
For restricting access to audio files they will be uploaded to the private folder.
The steps to accomplish this:

1. Install 'AudioField' and 'Content Access' modules.
2. Create content type with file field.
3. Restrict access to this content type for anonymous users.
4. Create a node of this content type and upload an audio file.
5. Create a view block for display the field of this content.
6. In the field's settings select 'AudioField player' formatter.
7. Restrict access for this block for anonymous users.

As an alternative to 'AudioField' you can use 'jPlayer' module.

Will not offer persistent audio

paul_constantine commented 24 July 2019 at 06:54

Thanks for the ideas :-) This approach will not work even tough it is a nice idea. Whenever a user navigates the page the audio will be lost because of a page reload. The only way to keep audio peristent is to place it somewhere where it will not be reloaded.

For this an iFrame is needed. The only other way would be to change the whole page navigation to ajax. Been there, done that. Unfortunately Ajax Pages is having so many conflicts with other modules that it is not usable, and the support is nonexistent. So iFrames offers the best solution so far.

Sorry, at first I didn't

wombatbuddy commented 24 July 2019 at 08:55

Sorry, at first I didn't realize the task.
Now I got it, and I'll think about it.

An iframe isn't going to

jaypan

Victoria, BC

commented 24 July 2019 at 02:41

An iframe isn't going to provide persistent audio, as the frame will be lost when the user navigates between pages.

For something like this, you need to set up a fully ajaxified site, so that any navigation around the site results in the new content being loaded without re-loading the entire page. Then you can have a player (doesn't need to be an iframe) to do this.

Unfortunately, there's not an easy way to do the above in Drupal.

Contact me to contract me for D7 -> D10/11 migrations.

iFrame works perfectly

paul_constantine commented 24 July 2019 at 06:49

As I have already tries this, the iFrame works perfectly. In fact the iFrame is the only thing that enables persistent audio while the user is navigating the drupal website below.

The ajax pages would be an alternative if they wouldn't mess up a lot of other functions on the page such as the wysiwyg module or the views autorefresh. And this is producing a ton of js errors in the console.

I have implemented the

wombatbuddy commented 28 July 2019 at 03:45

I have implemented the persistent audio and the site in iFrame.
If this is still actual, then I can share the solution.

Yes please.

paul_constantine commented 28 July 2019 at 07:05

I'd love to hear your thoughts on creating an iFrame solution.

See the guide: "How to create

wombatbuddy commented 1 August 2019 at 12:55

See the guide: "How to create a persistent audio with an iFrame, not using the 'Ajax pages' module".

Great

paul_constantine commented 2 August 2019 at 10:24

Hello Wombatbuddy,

thank you for the great documentation. I will try that out immediatelly. Specilally the part about the iFrame integretion is exactly what I was looking for. As for the proctected audio files that is great but unnessessary as I want to integrete a HTML5 Player to stream a webradio (Icecast stream).

I'll give feedback once I got this working.

Regards,

Paul

In this case you probably

wombatbuddy commented 2 August 2019 at 12:31

In this case you probably needn't to install additional contrib modules.
And the code of 'html--player_and_iframe.tpl.php' file may look like this:

<html>
  <style type="text/css">
    body {
      overflow: hidden;
    }
  </style>
<body>

<?php
print('<audio id="player" controls autoplay>');
print('<source src="your src..." type="audio/mpeg">');
print('</audio>');

print('<iframe id="drupal_site" src="http://drupal7.dev" height="100%" width="100%" frameborder="0"></iframe>');
?>

</body>
</html>

Not quite there yet

paul_constantine commented 3 August 2019 at 14:03

Sorry, did not get it to work.

Started a point 9 in your guide because I do not have the requirement to play files.

Created the content type with the name: 'player_and_iframe'.

Created a node 'player_and_iframe' with the name player as title and as an URL alias.

Could not load the player_amd_iframe node. Here is where I hit the first obstacle. When trying to open that node the server said: "Forbidden. You don't have permission to access /player/ on this server."

After that I created a folder "myframe" in the /htdocs/sites/all/modules" directory.

Inside that directory I created the file "myframe.module" with your content (taking care to replace "my_module" with "myframe".

<?php

/**
 * Implements hook_user_login().
 *
 * If a user is logged in and user has not the 'administrator' role
 * then redirect his to the page with the audio player and the iFrame.
 */
function myframe_user_login(&$edit, $account) {
  // Don't redirect if a user has the 'administrator' role.
  if (in_array('administrator', $account->roles)) {
    return;
  }

  if ($account->access > 0 ) {
    $_GET['destination'] = 'player';
  }
}

/**
 * Implements hook_preprocess_HOOK() for html template.
 */
function myframe_preprocess_html(&$variables) {
  if ($node = menu_get_object()) {
    if($node->type == 'player_and_iframe') {
      $variables['theme_hook_suggestions'][] = 'html__player_and_iframe';
    }
  }
}

After that I created the file "html--player_and_iframe.tpl.php" and places it in the template folder of my current theme. Here is the file's content:

<html>
  <style type="text/css">
    body {
      overflow: hidden;
    }
  </style>
<body>

<?php
print('<audio id="player" controls>');
print('<source src="http://stream-uk1.radioparadise.com/mp3-128" type="audio/mpeg">');
print('</audio>');

print('<iframe id="drupal_site" src="http://drupal7.dev" height="100%" width="100%" frameborder="0"></iframe>');
?>

</body>
</html>

Note that I removed the autoplay function.

After this I created the "logout_handler.js" file in the js folder of my current theme (Responsive Bartik).

/**
 * @file
 * JavaScript for logout handler.
 *
 * When a user click on the 'Log out' link we stop playing audio and leave the iFrame.
 * For achieve this we do the redirection to the '/user/logout' in the parent window
 * instead of in the iFrame. To prevent redirection in the iFrame we cancel the
 * standard click handler by calling 'event.preventDefault()'.
 */

(function ($) {
  Drupal.behaviors.logout_handler = {
    attach: function (context, settings) {
      $('a[href="/user/logout"]').once('logoutHandler').click(function(event) {
        event.preventDefault();
        window.parent.location = "/user/logout";
      });
    }
  };
})(jQuery);

Finally I added the line "scripts[] = js/logout_handler.js"to "/htdocs/sites/all/themes/responsive_bartik/responsive_bartik.info".

name = Responsive Bartik
description = A flexible, recolorable theme with many regions and a responsive, mobile-first layout.
version = VERSION
core = 7.x

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css

scripts[] = js/collapsible-menu.js
scripts[] = js/logout_handler.js

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0

; Information added by Drupal.org packaging script on 2014-10-15
version = "7.x-1.0"
core = "7.x"
project = "responsive_bartik"
datestamp = "1413392482"

I cleared the cache, rebuild all permissions and logged in as a non-admin registered user and nothing appeared.

What did I miss?

1. I think, that you need

wombatbuddy commented 3 August 2019 at 18:36

1. I think, that you need first to fix the access issue.
You must enable to view the node with 'player' alias without additional manipulation.
"Backap" to step 9 and make visible the node with 'plaer' alias.
Ensure that the current user has the permission to view a published content.
If you use the 'Content Access' module then give the permission for current user.

2. When you fix the access issue you need to install your custom module.
Create the 'myframe.info' file and install the module.
See 'Telling Drupal about your module'.

Thank you so much Wombatbuddy

paul_constantine commented 4 August 2019 at 12:25

Thank you so much Wombatbuddy, got it working. Fantastic!!!

Two things I did wrong.

1. I did not create an *.info file for the module, so I could not activate it.

2. The htdocs folder contained a player folder ... after I deleted that folder the access issue vanished.

Just a question. How do I reverse the order (Site on top. Player bar at the bottom) because on Safari the volume slider opens to the top and can't be used if the player is at the top of the page.

Kind regards

Paul

<html>

wombatbuddy commented 6 August 2019 at 15:37

<html>
  <style type="text/css">
    body {
      overflow: hidden;
    }
  </style>
<body>

<?php
print('<iframe id="drupal_site" src="http://drupal7.dev" height="92%" width="100%" frameborder="0"></iframe>');

print('<audio id="player" controls>');
print('<source src="http://stream-uk1.radioparadise.com/mp3-128" type="audio/mpeg">');
print('</audio>');
?>

</body>
</html>

Super!

paul_constantine commented 4 August 2019 at 15:50

Tried that before and it did not work. This time I noticed that I needed to reduce the height="100%" to height="92%" for the audio player to show. Sorry, should have noticed that myself :-)

Thanks again.

Paul

Caching Issue?

paul_constantine commented 11 August 2019 at 11:27

After testing this for a while I noticed, that sometimes the audioplayer will not appear. I found out that I had to delete the browser cache to make the player appear again. So after some help from Google I inserted the following code in the "html--player_and_iframe.tpl.php" file:

<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />

So far this seems to have worked. Have to test it a bil longer though to make sure it is so.

Have a great Sunday,

Paul

Nice work Wombatbuddy.

jaypan

Victoria, BC

commented 2 August 2019 at 12:40

Nice work Wombatbuddy.

Contact me to contract me for D7 -> D10/11 migrations.

Thanks, Jaypan, I'm trying to

wombatbuddy commented 2 August 2019 at 17:07

Thanks, Jaypan, I'm trying to follow your lead :)
By the way, how's it going with your book?

Using an iFrame for persistent audio.

Comments

You can try the other

Will not offer persistent audio

Sorry, at first I didn't

An iframe isn't going to

iFrame works perfectly

I have implemented the

Yes please.

See the guide: "How to create

Great

In this case you probably

Not quite there yet

1. I think, that you need

Thank you so much Wombatbuddy

<html>

Super!

Caching Issue?

Nice work Wombatbuddy.

Thanks, Jaypan, I'm trying to

New forum topics

News items

Our community

Documentation

Drupal code base

Governance of community