css 手机端自定播放音频

今日在尝试手机端访问网站不自动播放音频
再次写下解决方案
1.添加控制属性(controls)

 <audio autoplay="autopaly" loop="loop" controls="controls" id="audios">
        <source src="music/bg.mp3" type="audio/mp3" />
    </audio>

2.引入auto-plya.js

 try {
    
        var AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
        var context = new window.AudioContext();
        var source = null;
        var audioBuffer = null;
    
        function stopSound() {
          if (source) {
            source.stop(0);
          }
        }
        
        function playSound() {
          source = context.createBufferSource();
          source.buffer = audioBuffer;
          source.loop = true;
          source.connect(context.destination);
          source.start(0);
        }
    
        function initSound(arrayBuffer) {
          context.decodeAudioData(arrayBuffer, function (buffer) {
            audioBuffer = buffer;
            playSound();
          }, function (e) {
            console.log('Error decoding file', e);
          });
        }
    
        function loadAudioFile(url) {
          var xhr = new XMLHttpRequest();
          xhr.open('GET', url, true);
          xhr.responseType = 'arraybuffer';
          xhr.onload = function (e) {
          initSound(this.response);
        };
          xhr.send();
        }
    } catch (e) {
      console.log('!Your browser does not support AudioContext');
    }

猜你喜欢

转载自blog.csdn.net/qq_35416214/article/details/106207621