HTML音频自动播放功能

时间:2019-05-26 20:41:27

标签: javascript jquery html css audio

我创建了一个按钮来播放和暂停音频。音频需要自动播放。

我尝试将“自动播放”添加到标签中,该方法可以正常工作,但是此方法并未将“扬声器”类设置为启用。

https://jsfiddle.net/mdkp7cvy/

   var getaudio = $('#player')[0];
   /* Get the audio from the player (using the player's ID), the [0] is necessary */
   var mouseovertimer;
   /* Global variable for a timer. When the mouse is hovered over the speaker it will start playing after hovering for 1 second, if less than 1 second it won't play (incase you accidentally hover over the speaker) */
   var audiostatus = 'off';
   /* Global variable for the audio's status (off or on). It's a bit crude but it works for determining the status. */

   $(document).on('mouseenter', '.speaker', function() {
     /* Bonus feature, if the mouse hovers over the speaker image for more than 1 second the audio will start playing */
     if (!mouseovertimer) {
       mouseovertimer = window.setTimeout(function() {
         mouseovertimer = null;
         if (!$('.speaker').hasClass("speakerplay")) {
           getaudio.load();
           /* Loads the audio */
           getaudio.play();
           /* Play the audio (starting at the beginning of the track) */
           $('.speaker').addClass('speakerplay');
           return false;
         }
       }, 1000);
     }
   });

   $(document).on('mouseleave', '.speaker', function() {
     /* If the mouse stops hovering on the image (leaves the image) clear the timer, reset back to 0 */
     if (mouseovertimer) {
       window.clearTimeout(mouseovertimer);
       mouseovertimer = null;
     }
   });

   $(document).on('click touchend', '.speaker', function() {
     /* Touchend is necessary for mobile devices, click alone won't work */
     if (!$('.speaker').hasClass("speakerplay")) {
       if (audiostatus == 'off') {
         $('.speaker').addClass('speakerplay');
         getaudio.load();
         getaudio.play();
         window.clearTimeout(mouseovertimer);
         audiostatus = 'on';
         return false;
       } else if (audiostatus == 'on') {
         $('.speaker').addClass('speakerplay');
         getaudio.play()
       }
     } else if ($('.speaker').hasClass("speakerplay")) {
       getaudio.pause();
       $('.speaker').removeClass('speakerplay');
       window.clearTimeout(mouseovertimer);
       audiostatus = 'on';
     }
   });

   $('#player').on('ended', function() {
     $('.speaker').removeClass('speakerplay');
     /*When the audio has finished playing, remove the class speakerplay*/
     audiostatus = 'off';
     /*Set the status back to off*/
   });

我需要音频才能自动播放,还需要在自动播放时将“扬声器”类添加到“开”

0 个答案:

没有答案