JAVASCRIPT音频应用程序：按钮不会根据设备更改

这是一个简单的控件的嵌入式音频播放器。我做了这个作为我的网站的插件。由于移动浏览器不支持自动播放功能。播放/暂停按钮根据设备而改变，即：播放按钮显示在移动设备上，暂停按钮显示在电脑上JAVASCRIPT音频应用程序：按钮不会根据设备更改

播放器的移动侧完美地工作。但是，即使音频在后台播放，它的PC端也以播放按钮开始。即。 else条件不工作

如果错误的心不是清除请复制粘贴在这里的代码，看看：www.htmledit.squarefree.com

<head> 


     <script> 
      var playing = true; 

      if (/Android|iPhone|iPad|Mobile|Mobi|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) { 
       playing = false; 
      } 
    <!-- THIS ELSE DOES NOT WORK . IT IS SUPPOSED TO CHANGE THE ICON TO PAUSE FROM PRE DEFINED PLAY ICON--> 
      else{ 
       document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAuUlEQVRoQ+2YwQ2AIAxFYRwncS3WchLH0YN6IWp/QhtCeJ5rgfd/W0JOg3958P0nDtBbQRRAgUYCWKgRYPPv8yiwlO1QcO1l/YXilefZi6yA18JeeTjAl52w0E3GAoGFsJDRk7FQDcirf3vloYgpYor4IsBlrnaC1b/pQhUxLISFPtqpVUtMYiYxk5hJ/O4Bq3swiaedxMq7aI8Y+S7UY3PKmhxAoRQZgwKRdJXcKKBQioxBgUi6Su4TGV3gMZ8LoyUAAAAASUVORK5CYII="; 
      } 



      function EvalSound(soundobj) { 
       var thissound = document.getElementById(soundobj); 

       if (!playing) { 
        thissound.play(); 
        playing = true; 
        document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAuUlEQVRoQ+2YwQ2AIAxFYRwncS3WchLH0YN6IWp/QhtCeJ5rgfd/W0JOg3958P0nDtBbQRRAgUYCWKgRYPPv8yiwlO1QcO1l/YXilefZi6yA18JeeTjAl52w0E3GAoGFsJDRk7FQDcirf3vloYgpYor4IsBlrnaC1b/pQhUxLISFPtqpVUtMYiYxk5hJ/O4Bq3swiaedxMq7aI8Y+S7UY3PKmhxAoRQZgwKRdJXcKKBQioxBgUi6Su4TGV3gMZ8LoyUAAAAASUVORK5CYII="; 
       } else if (playing) { 
        thissound.pause(); 
        playing = false; 
        document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABdElEQVRoQ+2YuxWCQBBFl0Rb0TJM9NiFdoAVOHSAHWAZZtoFoXagGZHroOghMHA+++G4JCT7mTvv8VjIzMCvbOD1mwQQWsGkQFJA2IFkIWEDxdP/V4EJHI7G3Fc1LM/iNgoWYCswhYNt97WZgcaOdmeYXQV1sKeKAbqdrwiS19vFnl0Jc6IWwHN7ayzayhZoK7z7uVQB3iUjSNWY8caHrZwA9GxVoq0Kl1q4BHjbClPKrl3ZyjlAz1bt89GCqMauN4APiHLsegfQjt1QAGqxGxRAI3ajAJDEbkwArNiNDgCj9oJv8vaU+9NxJBoAPNreUIKyhgVQ3txRAGDx+8aMcs7ZKSgAFn7CjyL41S7flAkC8LJLltcwryh2iQIAiy/QLiXHLkEBOruof0N7sBAtFqmWcgbAjcUoACSxGBRAIxaDAGjGoncA7Vj0BjD4X4vUTrkaz45RVwVR100A1I5pj08KaHeUul5SgNox7fFJAe2OUtd7AO2p3zFrWh4hAAAAAElFTkSuQmCC"; 
       } 
      } 

     </script> 
    </head> 



    <body> 

     <a href="javascript:null()" onClick="EvalSound('sound1'); return false; "> 

<!-- PRE DEFINED PLAY ICON IS BELOW --> 

      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABdElEQVRoQ+2YuxWCQBBFl0Rb0TJM9NiFdoAVOHSAHWAZZtoFoXagGZHroOghMHA+++G4JCT7mTvv8VjIzMCvbOD1mwQQWsGkQFJA2IFkIWEDxdP/V4EJHI7G3Fc1LM/iNgoWYCswhYNt97WZgcaOdmeYXQV1sKeKAbqdrwiS19vFnl0Jc6IWwHN7ayzayhZoK7z7uVQB3iUjSNWY8caHrZwA9GxVoq0Kl1q4BHjbClPKrl3ZyjlAz1bt89GCqMauN4APiHLsegfQjt1QAGqxGxRAI3ajAJDEbkwArNiNDgCj9oJv8vaU+9NxJBoAPNreUIKyhgVQ3txRAGDx+8aMcs7ZKSgAFn7CjyL41S7flAkC8LJLltcwryh2iQIAiy/QLiXHLkEBOruof0N7sBAtFqmWcgbAjcUoACSxGBRAIxaDAGjGoncA7Vj0BjD4X4vUTrkaz45RVwVR100A1I5pj08KaHeUul5SgNox7fFJAe2OUtd7AO2p3zFrWh4hAAAAAElFTkSuQmCC" id="sound_icon" name="Sound" width="" height="" title="Background Music Controls" class="" /></a> 


     <audio id="sound1" style="display: none; width: 0px; height: 0px;" src="https://audio.clyp.it/3fnnuaiw.mp3?Expires=1488659248&Signature=01NkRScwYO4XaJO46JuNzPRR6cYQfcL5~rJzAu-gIoNoXkiMVZwazwT--amuqYvreLCSRFnFAFUvwR3v9Xaq1iB4~OmKSWqtF9mSm-CUB2Moqtie8wpGIRxTAkDHnfhN0sy45sINjwFP2xyVumld78USPuCBfNU3kgux69YG-yA_&Key-Pair-Id=APKAJ4AMQB3XYIRCZ5PA" controls preload="auto" autobuffer autoplay> 
    </body>

来源

2017-03-04 Saurav Suresh

当装载在报头中的脚本部分之前的运行页面在DOM处创建的元素。请参阅this other answer以更好地了解它的工作原理。

有它的工作，你可以在最后加载脚本：

<body> 
 

 
    <a href="javascript:null()" onClick="EvalSound('sound1'); return false; "> 
 

 
<!-- PRE DEFINED PLAY ICON IS BELOW --> 
 

 
     <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABdElEQVRoQ+2YuxWCQBBFl0Rb0TJM9NiFdoAVOHSAHWAZZtoFoXagGZHroOghMHA+++G4JCT7mTvv8VjIzMCvbOD1mwQQWsGkQFJA2IFkIWEDxdP/V4EJHI7G3Fc1LM/iNgoWYCswhYNt97WZgcaOdmeYXQV1sKeKAbqdrwiS19vFnl0Jc6IWwHN7ayzayhZoK7z7uVQB3iUjSNWY8caHrZwA9GxVoq0Kl1q4BHjbClPKrl3ZyjlAz1bt89GCqMauN4APiHLsegfQjt1QAGqxGxRAI3ajAJDEbkwArNiNDgCj9oJv8vaU+9NxJBoAPNreUIKyhgVQ3txRAGDx+8aMcs7ZKSgAFn7CjyL41S7flAkC8LJLltcwryh2iQIAiy/QLiXHLkEBOruof0N7sBAtFqmWcgbAjcUoACSxGBRAIxaDAGjGoncA7Vj0BjD4X4vUTrkaz45RVwVR100A1I5pj08KaHeUul5SgNox7fFJAe2OUtd7AO2p3zFrWh4hAAAAAElFTkSuQmCC" id="sound_icon" name="Sound" width="" height="" title="Background Music Controls" class="" /></a> 
 

 

 
    <audio id="sound1" style="display: none; width: 0px; height: 0px;" src="https://audio.clyp.it/3fnnuaiw.mp3?Expires=1488659248&Signature=01NkRScwYO4XaJO46JuNzPRR6cYQfcL5~rJzAu-gIoNoXkiMVZwazwT--amuqYvreLCSRFnFAFUvwR3v9Xaq1iB4~OmKSWqtF9mSm-CUB2Moqtie8wpGIRxTAkDHnfhN0sy45sINjwFP2xyVumld78USPuCBfNU3kgux69YG-yA_&Key-Pair-Id=APKAJ4AMQB3XYIRCZ5PA" controls preload="auto" autobuffer autoplay> 
 

 
    <script> 
 
     var playing = true; 
 
     var flag = false; 
 
     if (/Android|iPhone|iPad|Mobile|Mobi|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) { 
 
      playing = false; 
 
     } else{ 
 
      document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAuUlEQVRoQ+2YwQ2AIAxFYRwncS3WchLH0YN6IWp/QhtCeJ5rgfd/W0JOg3958P0nDtBbQRRAgUYCWKgRYPPv8yiwlO1QcO1l/YXilefZi6yA18JeeTjAl52w0E3GAoGFsJDRk7FQDcirf3vloYgpYor4IsBlrnaC1b/pQhUxLISFPtqpVUtMYiYxk5hJ/O4Bq3swiaedxMq7aI8Y+S7UY3PKmhxAoRQZgwKRdJXcKKBQioxBgUi6Su4TGV3gMZ8LoyUAAAAASUVORK5CYII="; 
 
     } 
 

 

 

 
     function EvalSound(soundobj) { 
 
      var thissound = document.getElementById(soundobj); 
 

 
      if (!playing) { 
 
       thissound.play(); 
 
       playing = true; 
 
       document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAuUlEQVRoQ+2YwQ2AIAxFYRwncS3WchLH0YN6IWp/QhtCeJ5rgfd/W0JOg3958P0nDtBbQRRAgUYCWKgRYPPv8yiwlO1QcO1l/YXilefZi6yA18JeeTjAl52w0E3GAoGFsJDRk7FQDcirf3vloYgpYor4IsBlrnaC1b/pQhUxLISFPtqpVUtMYiYxk5hJ/O4Bq3swiaedxMq7aI8Y+S7UY3PKmhxAoRQZgwKRdJXcKKBQioxBgUi6Su4TGV3gMZ8LoyUAAAAASUVORK5CYII="; 
 
      } else if (playing) { 
 
       thissound.pause(); 
 
       playing = false; 
 
       document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABdElEQVRoQ+2YuxWCQBBFl0Rb0TJM9NiFdoAVOHSAHWAZZtoFoXagGZHroOghMHA+++G4JCT7mTvv8VjIzMCvbOD1mwQQWsGkQFJA2IFkIWEDxdP/V4EJHI7G3Fc1LM/iNgoWYCswhYNt97WZgcaOdmeYXQV1sKeKAbqdrwiS19vFnl0Jc6IWwHN7ayzayhZoK7z7uVQB3iUjSNWY8caHrZwA9GxVoq0Kl1q4BHjbClPKrl3ZyjlAz1bt89GCqMauN4APiHLsegfQjt1QAGqxGxRAI3ajAJDEbkwArNiNDgCj9oJv8vaU+9NxJBoAPNreUIKyhgVQ3txRAGDx+8aMcs7ZKSgAFn7CjyL41S7flAkC8LJLltcwryh2iQIAiy/QLiXHLkEBOruof0N7sBAtFqmWcgbAjcUoACSxGBRAIxaDAGjGoncA7Vj0BjD4X4vUTrkaz45RVwVR100A1I5pj08KaHeUul5SgNox7fFJAe2OUtd7AO2p3zFrWh4hAAAAAElFTkSuQmCC"; 
 
      } 
 
     } 
 

 
    </script> 
 
</body>

或负载窗口后，装有window.onload

<head> 
 
<script> 
 
    var playing = true; 
 
    var flag = false; 
 

 
    window.onload = function() { 
 
    if (/Android|iPhone|iPad|Mobile|Mobi|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) { 
 
     playing = false; 
 
    } else { 
 
     document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAuUlEQVRoQ+2YwQ2AIAxFYRwncS3WchLH0YN6IWp/QhtCeJ5rgfd/W0JOg3958P0nDtBbQRRAgUYCWKgRYPPv8yiwlO1QcO1l/YXilefZi6yA18JeeTjAl52w0E3GAoGFsJDRk7FQDcirf3vloYgpYor4IsBlrnaC1b/pQhUxLISFPtqpVUtMYiYxk5hJ/O4Bq3swiaedxMq7aI8Y+S7UY3PKmhxAoRQZgwKRdJXcKKBQioxBgUi6Su4TGV3gMZ8LoyUAAAAASUVORK5CYII="; 
 
    } 
 
    } 
 

 

 

 
    function EvalSound(soundobj) { 
 
    var thissound = document.getElementById(soundobj); 
 

 
    if (!playing) { 
 
     thissound.play(); 
 
     playing = true; 
 
     document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAuUlEQVRoQ+2YwQ2AIAxFYRwncS3WchLH0YN6IWp/QhtCeJ5rgfd/W0JOg3958P0nDtBbQRRAgUYCWKgRYPPv8yiwlO1QcO1l/YXilefZi6yA18JeeTjAl52w0E3GAoGFsJDRk7FQDcirf3vloYgpYor4IsBlrnaC1b/pQhUxLISFPtqpVUtMYiYxk5hJ/O4Bq3swiaedxMq7aI8Y+S7UY3PKmhxAoRQZgwKRdJXcKKBQioxBgUi6Su4TGV3gMZ8LoyUAAAAASUVORK5CYII="; 
 
    } else if (playing) { 
 
     thissound.pause(); 
 
     playing = false; 
 
     document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABdElEQVRoQ+2YuxWCQBBFl0Rb0TJM9NiFdoAVOHSAHWAZZtoFoXagGZHroOghMHA+++G4JCT7mTvv8VjIzMCvbOD1mwQQWsGkQFJA2IFkIWEDxdP/V4EJHI7G3Fc1LM/iNgoWYCswhYNt97WZgcaOdmeYXQV1sKeKAbqdrwiS19vFnl0Jc6IWwHN7ayzayhZoK7z7uVQB3iUjSNWY8caHrZwA9GxVoq0Kl1q4BHjbClPKrl3ZyjlAz1bt89GCqMauN4APiHLsegfQjt1QAGqxGxRAI3ajAJDEbkwArNiNDgCj9oJv8vaU+9NxJBoAPNreUIKyhgVQ3txRAGDx+8aMcs7ZKSgAFn7CjyL41S7flAkC8LJLltcwryh2iQIAiy/QLiXHLkEBOruof0N7sBAtFqmWcgbAjcUoACSxGBRAIxaDAGjGoncA7Vj0BjD4X4vUTrkaz45RVwVR100A1I5pj08KaHeUul5SgNox7fFJAe2OUtd7AO2p3zFrWh4hAAAAAElFTkSuQmCC"; 
 
    } 
 
    } 
 

 
</script> 
 
</head> 
 

 
<body> 
 

 
<a href="javascript:null()" onClick="EvalSound('sound1'); return false; "> 
 

 
<!-- PRE DEFINED PLAY ICON IS BELOW --> 
 

 
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABdElEQVRoQ+2YuxWCQBBFl0Rb0TJM9NiFdoAVOHSAHWAZZtoFoXagGZHroOghMHA+++G4JCT7mTvv8VjIzMCvbOD1mwQQWsGkQFJA2IFkIWEDxdP/V4EJHI7G3Fc1LM/iNgoWYCswhYNt97WZgcaOdmeYXQV1sKeKAbqdrwiS19vFnl0Jc6IWwHN7ayzayhZoK7z7uVQB3iUjSNWY8caHrZwA9GxVoq0Kl1q4BHjbClPKrl3ZyjlAz1bt89GCqMauN4APiHLsegfQjt1QAGqxGxRAI3ajAJDEbkwArNiNDgCj9oJv8vaU+9NxJBoAPNreUIKyhgVQ3txRAGDx+8aMcs7ZKSgAFn7CjyL41S7flAkC8LJLltcwryh2iQIAiy/QLiXHLkEBOruof0N7sBAtFqmWcgbAjcUoACSxGBRAIxaDAGjGoncA7Vj0BjD4X4vUTrkaz45RVwVR100A1I5pj08KaHeUul5SgNox7fFJAe2OUtd7AO2p3zFrWh4hAAAAAElFTkSuQmCC" id="sound_icon" name="Sound" width="" height="" title="Background Music Controls" class="" /></a> 
 

 

 
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="https://audio.clyp.it/3fnnuaiw.mp3?Expires=1488659248&Signature=01NkRScwYO4XaJO46JuNzPRR6cYQfcL5~rJzAu-gIoNoXkiMVZwazwT--amuqYvreLCSRFnFAFUvwR3v9Xaq1iB4~OmKSWqtF9mSm-CUB2Moqtie8wpGIRxTAkDHnfhN0sy45sINjwFP2xyVumld78USPuCBfNU3kgux69YG-yA_&Key-Pair-Id=APKAJ4AMQB3XYIRCZ5PA" controls preload="auto" autobuffer autoplay> 
 

 
</body>

来源

2017-03-04 21:01:41 giorni

**非常感谢您抽出时间给这样一个愚蠢的问题提供这样一个真棒解释!!!!。它完美的作品。这是我第一次尝试任何html/js。请检查它在我的网站上的行动kzsh.weebly.com –

没问题@SauravSuresh！在你的网站上干得不错。很高兴知道我可以提供帮助。顺便说一句，如果这个或任何答案已解决您的问题，请点击复选标记考虑[接受它]（http://meta.stackexchange.com/q/5234/179419）。这向更广泛的社区表明，您已经找到了解决方案，并为答复者和您自己提供了一些声誉。没有义务这样做。 – giorni

是的。我已经接受了！再次感谢！！！ –

JAVASCRIPT音频应用程序：按钮不会根据设备更改

回答

相关问题