How to modify the style of tag in html

Due to the popularity of HTML5, audio can now be used to play audio for most needs on mobile terminals. However, you may only need a simple play/stop effect, but the audio styles on different browsers are not satisfactory. So how to change this style? In fact, its principle is relatively simple, that is, do not use the controls attribute when writing audio, hide the native audio, and then use tags such as p to define a css style to beautify it to display the effect of the player. , and finally use js to capture audio events, which are basically src path, pause, load, and play. The following are some related APIs of the audio tag:

Control function function description

load(): Load audio and video software, usually no need to call, unless it is dynamically generated Element, used to preload before playing

play(): Load and play audio and video files. Unless the file has been paused at other locations, playback will restart by default

pause(): Pause audio and video files in the playing state

audio Scriptable property value:

src: audio file path.

autoplay: Set whether the audio plays automatically (the default property is to automatically play loaded media files), or check whether it has been set to autoplay

autobuffer: Set whether to automatically buffer audio when the page loads. If autoplay is set, this feature will be ignored.

loop: Set whether the audio should be played in a loop. , or query whether it has been set to loop

currentTime: Returns the time taken from the start of playback to the present in s. You can also set the value of currentTime to jump to a specific position

controls : Show or hide the user control interface (properties for adding play, pause and volume controls.)

volume: Set the volume value between 0.0 and 1.0, or query the current volume value

muted: Set Whether to mute

Read-only attribute Attribute description

duration: Get the playback duration of the media file, in s, if it cannot be obtained, it will be NaN

paused: If the media file is paused, return true, otherwise return false

ended: If the media file is played, return true

startTime: Return the starting playback time, usually 0.0, unless it is a buffered media file and part of the content is no longer in the buffer

error: The error code returned after an error occurs

currentSrc: as a stringForm returns the file being played or loaded, corresponding to the file selected by the browser in the source element

All mainstream browsers support these attributes. But don't think that there is no compatibility. In audio playback streams, there are two camps. Firefox and Opera support ogg audio, Safari and IE support mp3. Fortunately, Google's chrome supports it.

<p class="btn-audio"><audio id="mp3Btn"><source src="images/audio.mp3" type="audio/mpeg" /></audio></p>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>

body{
    background:#2b2938;
}
.btn-audio{
    margin: 90px auto;
    width: 186px;
    height: 186px;
    background:url(images/voice_stop.png) no-repeat center bottom;
    background-size:cover;
}

<script type="text/javascript">
    $(function(){
        //播放完毕
        $(&#39;#mp3Btn&#39;).on(&#39;ended&#39;, function() {
            console.log("音频已播放完成");
            $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_stop.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
        })
        //播放器控制
        var audio = document.getElementById(&#39;mp3Btn&#39;);
        audio.volume = .3;
        $(&#39;.btn-audio&#39;).click(function() {
            event.stopPropagation();//防止冒泡
            if(audio.paused){ //如果当前是暂停状态
                $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_play.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
                audio.play(); //播放
                return;
            }else{//当前是播放状态
                $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_stop.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
                audio.pause(); //暂停
            }
        });
    })
</script>

As a technical implementation, its principle is relatively simple, that is, to hide the native audio, then use p to display the effect of the player, and then call its click event to trigger play and stop, and then the duration. , this value can sometimes be obtained, but sometimes it cannot, which is a bit tricky, so it is recommended to customize the duration attribute storage time on the audio tag. At this time, if the component cannot obtain it, it will get this value.

this.settings.target.on('loadedmetadata', function() { 
_this.duration = _this.audio.duration; 
if (_this.duration != "Infinity") { 
_this.durationContent.html(Math.floor(_this.duration) + 's'); 
} else { 
var attr = $(_this.settings.target).attr('duration'); 
if(attr){ 
_this.durationContent.html($(_this.settings.target).attr('duration')+"s"); 
}else{ 
_this.durationContent.html(''); 
} 
} 
});

The above is the detailed content of How to modify the style of