Disable audio background on mobile

Question

I'm using this simple script to play a background audio theme in a website, is it possible to prenvent the play on mobile?

  $(document).ready(function() {
       var audioElement = document.createElement('audio');
       audioElement.setAttribute('src', 'audio/theme.mp3');
       audioElement.setAttribute('autoplay', 'autoplay');
       audioElement.volume = 0.1;
       audioElement.loop = true;
       $.get();

       audioElement.addEventListener("load", function() {
       audioElement.play();
    }, true);

[javascript - Detecting a mobile browser](http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser) — soumasandesu, Apr 20 '16 at 23:25
There are no words to describe how annoying I find webpages that play background audio... I usually close the page immediately and continue listening to my music. — Lyall, Apr 21 '16 at 08:32
On awwwards.com there are some of the best websites in the world using an audio background. So I think people can click on the on/off audio button before to leave the websites. This will a movie's websites and audio will be part of the navigation experience. — vlk, Apr 21 '16 at 10:40

Ashielf · Accepted Answer · 2016-04-21T08:28:33.650

0

While searching the web for my own project I found http://detectmobilebrowsers.com/.

For example, you can click on JavaScript or jQuery and get the script which you need for your site. With it, you can define when audio should or shouldn't be played.

edited Apr 21 '16 at 08:28

answered Apr 21 '16 at 06:42

Ashielf

70
10

score 0 · Answer 2 · answered Apr 22 '16 at 02:00

I've found a simple way to do this based on screen width , maybe it isn't perfect but it works good on this website:

    var screenw = $(window).width();

     if (screenw <= 800) {  audioElement.pause(); }
     else { audioElement.play(); }

try it on http://www.nuraghesmovie.com

Disable audio background on mobile

2 Answers2