Hi all,

 

I have an audio file set to autoplay on a website (not my choice) but I was wondering how can I disable it for mobiles.

 

My code currently is:

<audio src="#" autoplay loop>

audio	{
	display: none;	
}

That's for desktops, I tried wrapping the audio tag in a div and setting that as display none for any device under 767px but that didn't work.

 

Any ideas?

 

Thanks,

Al.

@media handheld{

   display:none;

}

Hi all,

 

I have an audio file set to autoplay on a website (not my choice) but I was wondering how can I disable it for mobiles.

 

My code currently is:

<audio src="#" autoplay loop>

audio	{
	display: none;	
}

That's for desktops, I tried wrapping the audio tag in a div and setting that as display none for any device under 767px but that didn't work.

 

Any ideas?

 

Thanks,

Al.

 

Display none won't remove elements from the DOM, it literally just hides the content from view.

 

I know you've likely explained to the client why this is a terrible idea, but I'd go back and try again. If you're preventing audio on a mobile from autoplaying, then it's obvious that it's going to be just as bad on desktop. You also can't guarantee a lower viewport size is a desktop.

 

Having autoplaying audio is going to increase the bounce rate on the site considerably. There's a reason why Facebook decided against it on autoplaying videos.

Autoplaying audio on websites will kill conversion rates. Just a quick Google around will reveal many articles going into more detail. Just take it away entirely.

I couldn't agree more about audio on websites, it's the last thing I would want but I'm just doing what I'm told, I'm not really in contact with the client so it's not my decision.

 

It only seems to work on Firefox on mobile anyway, but would be nice to remove it from there. The client still has to review the audio, so hopefully they will change their mind about it.

Anyway with jQuery of Javascript I could remove the audio element at a certain screen size?

First of all remove the autoplay attribute (we will start the audio with js) add an id and a control attribute if you want the user to be able to control the audio with the native controls

<audio controls id="my-audio" src="audiofile.mp3"></audio>

By adding the id you can now target the audio element and control the playback with javascript

 

Create a js function that fires when the document has loaded.,

In the function add the reference to the audio element and an if statement that checks if the browsers width is greater than [what ever you decide a mobile is]

If true: Call the build in play() function of the audio element.

window.addEventListener('load', function load(event) {
  var audio = document.getElementById('my-audio');
  if (document.documentElement.clientWidth > 720) {
    audio.play();
  }
});

Edited August 19, 201610 yr by Nillervision

Or if you dont want the audio element at all on small devices you could create the element programmatically.

First create a placeholder in the document to nest the audio if you want the native controls

<div id="audio-placeholder"></div>

Now simply create the audio element (and set the attributes) in the load function.

window.addEventListener('load', function load(event) {
  if (document.documentElement.clientWidth > 720) {
    var audio = document.createElement('audio');
    var audioPlaceHolder = document.getElementById('audio-placeholder');
    audio.setAttribute('src', 'audiofile.mp3');
    audio.setAttribute('controls', '');
    audioPlaceHolder.appendChild(audio);
    audio.play();
  }
});

Edited August 19, 201610 yr by Nillervision

The final solution (if you dont need native controls) could be to create an audio object, in the memory, with reference to the audio file and NOT attach it to the document at all.

<!-- NO HTML NEEDED -->

 window.addEventListener('load', function load(event) {
  if (document.documentElement.clientWidth > 720) {
    var audio = new Audio('audiofile.mp3');
    audio.play();
  }
});

Edited August 19, 201610 yr by Nillervision

Thanks for those replies Nillervision, lot of solutions there.

 

I was told that the client doesn't want any audio controls, in fact not have the any audio showing at all, just playing in the background and to not have it at all on mobile would probably be best.

 

Thanks for the help!

Does he want everybody to leave his site?

 

No being able to turn off the audio will just about kill off any chances of conversion. And Google may agree as they don't like like sites that hijack user control.

 

And there is still the fact that auto starting audio and video is disliked by just about everybody. Except your client.

I really don't like this approach either, can't stand music on websites, unless I'm viewing videos etc.

 

The final decision is not up to me, if it were there would be no music.