Skip to content
This repository has been archived by the owner on Sep 25, 2021. It is now read-only.

Audio element stops/pause playing even if it is flag as data-turbolinks-permanent #157

Closed
rgagnon opened this issue Aug 3, 2016 · 7 comments
Closed

Audio element stops/pause playing even if it is flag as data-turbolinks-permanent #157

rgagnon opened this issue Aug 3, 2016 · 7 comments

Comments

@rgagnon
Copy link

rgagnon commented Aug 3, 2016

Hi,

I'm trying to make turbolinks 5 to work with an html5 audio element. I put this element within a div flagged as data-turbolinks-permanent. Everything works well, the div has not been refresh but the audio just pause. I can hit the play and it continues where it was.

It was ok with a previous version of turbolinks.

Any idea?
@beastafk
Copy link

beastafk commented Aug 22, 2016 •
edited
Loading

Hi,

I don't know about previous versions, but I had the same problem with video elements and webRTC live communication. I managed to "solve" it by manually calling $myMediaElement.play(); on every turbolinks:load event, something like that

document.addEventListener("turbolinks:load", function() {
    $('.js-local-stream')[0].play();
    $('.js-remote-stream')[0].play();
});

It's a stupid fix, but I haven't found anything better for now and for me it works. There is a problem though with normal <video> elements. While using the solution from above for playing the video, the audio is started each time from the beginning, which causes a strange case, where you hear your audio from the beginning on every page visit. Something in the turbolinks is making the media elements to stop on every load.

@rgagnon
Copy link
Author

rgagnon commented Aug 24, 2016

Thanks,

I did the same thing on my side though. My issue with this is if the user pause the audio before changing page, the audio starts playing.

Glad I'm not alone with this issue.

@christophwolff
Copy link

christophwolff commented Aug 31, 2016 •
edited
Loading

You can solve this by creating a plain audio object without a Tag

const audio = new Audio('path/to/mp3'); audio.play();

Then changing pages works. But you need to build an own audio element with play pause, volume etc..

@nateberkopec
Copy link
Contributor

Similar to #177.

@nateberkopec nateberkopec mentioned this issue Oct 4, 2016
Open
@hainminsoe
Copy link

same here ..

@domchristie
Copy link
Collaborator

domchristie commented Sep 20, 2018 •
edited
Loading

Turbolinks clones data-turbolinks-permanent elements before rendering a visit, then replaces elements in the new <body> with the cloned ones. It looks like the "playing" state is excluded from the clone 😞

Good news is that uninterrupted audio/video play back across pages can be achieved by tracking the playing state ourselves. I've not been able to discover how media elements are cloned, but (luckily) it seems like the current time is cloned, so we can just call play (if applicable) once the visit has rendered 🎉

;(function () {
  var forEach = Array.prototype.forEach
  var selector = [
    '[data-turbolinks-permanent] audio',
    'audio[data-turbolinks-permanent]',
    '[data-turbolinks-permanent] video',
    'video[data-turbolinks-permanent]'
  ].join(',')

  addEventListener('turbolinks:load', function () {
    var mediaElements = document.querySelectorAll(selector)
    forEach.call(mediaElements, uninterrupt)
  })

  // Bind to turbolinks:render to handle previews
  addEventListener('turbolinks:render', function () {
    var mediaElements = document.querySelectorAll(selector)
    forEach.call(mediaElements, function (media) {
      if (media.isPlaying) media.play()
    })
  })

  function uninterrupt (media) {
    if (!media.uninterrupted) {
      media.addEventListener('play', function () { media.isPlaying = true })
      media.addEventListener('pause', function () { media.isPlaying = false })
      media.uninterrupted = true
    }
  }
})()

This will work for data-turbolinks-permanent media elements, and media elements contained within a data-turbolinks-permanentcontainer. It seemed to operate seemlessly on Safari and Firefox macOS, and with minor clicks/jumping when switching between pages on Chrome. Hope that helps!

@domchristie domchristie mentioned this issue Sep 26, 2018
Closed
@mcalia
Copy link

mcalia commented Jan 27, 2020

Hi all,
I'm using turbolinks by a wordpress plugin (https://it.wordpress.org/plugins/turbolinks/).

I faced the same issue (music stops playing). But it can be resolved by specifying the ID attribute of the "data-turbolinks-permanent" container.

This is my case:
I implemented a very simple test audio player (just for testing turbolinks) by quickly adding this in my theme's header.php file:

<!-- NOT WORKING example -->
<div data-turbolinks-permanent>
	<audio controls src="mysong.mp3">
	  Your browser does not support the audio element.
	</audio>
</div>

This way, any time I click on a link, the player stops playing.

if I change the code this way, it works perfectly and the audio keeps playing when moving from a page to another:

<!-- WORKING FINE example -->
<div id="my-div" data-turbolinks-permanent>
	<audio controls src="mysong.mp3">
	  Your browser does not support the audio element.
	</audio>
</div>

It seems that the ID attribute is necessary on the turbolinks' permanent containers.

Hope this helps.

@danjac danjac mentioned this issue Dec 23, 2020
Closed
@le0pard le0pard mentioned this issue Mar 27, 2021
Closed
@janbaykara janbaykara mentioned this issue Jan 18, 2022
Merged
10 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@rgagnon @domchristie @nateberkopec @beastafk @christophwolff @hainminsoe @mcalia