[前端] 音频/视频播放控制

音频：

IE9以下不支持audio标签元素

 

<audio id="audio" src="image/douxian.mp3" controls="controls" preload="auto" loop>
    Your browser does not support the audio tag.
</audio>

 

参数说明：

src：要播放的音频的 URL

controls：如果出现该属性，则向用户显示控件，比如播放按钮。

autoplay：如果出现该属性，则音频在就绪后马上播放。

loop：如果出现该属性，则每当音频结束时重新开始播放。

preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

可能的值：

auto - 当页面加载后载入整个音频

meta - 当页面加载后只载入元数据

none - 当页面加载后不载入音频

 

下面进行一些常用的方法控制

 

效果图（可以使用按钮和选择范围控制）：

 

HTML布局：

 

<audio id="audio" src="image/douxian.mp3" controls="controls" preload="auto" loop>
    Your browser does not support the audio tag.
</audio>
<hr>
<div class="music"></div>
<hr/>
<button class="play" type="button">播放</button>
<button class="pause" type="button">暂停</button>
<button class="mute" type="button">静音</button>
<hr/>
音量：<input name="volume" type="range" min="1" max="10" value="5"> <span class="volume"></span>
<hr/>
进度：<input name="schedule" type="range" min="1" max="10" value="1"> <span class="schedule"></span>
<hr/>
<div class="ended"></div>

 

 

JS脚本操作

 

<script> 
    $(function() {
        var audio = document.getElementById('audio'); // 不支持$('#audio')

        /* 当前音乐 */
        $('.music').text('当前音乐：'+audio.src);

        /* 播放 */
        $('.play').click(function() {
            audio.volume = 0.5; // 设置竟是
            $('.volume').text(audio.volume);
            audio.play(); // 播放
        });  

        /* 暂停 */
        $('.pause').click(function() {
            audio.pause();
        });

        /* 静音 */
        $('.mute').click(function() {
            if(audio.muted) {
                $(this).text('静音');
                audio.muted = false;
            } else {
                $(this).text('取消静音');
                audio.muted = true;
            }
        });

        /* 设置音量 */
        $('[name="volume"]').change(function() {
            var volume = $(this).val() / 10;
            audio.volume = volume;
            $('.volume').text(volume);
        });

        /* 进度控制 */
        $('[name="schedule"]').change(function() {
            var audioLength = audio.duration;  // 获取当前音频的长度
            var unit = audioLength / parseInt($(this).attr('max')); // 每1格对应的实例秒数
            audio.currentTime = $(this).val() * unit;
            $('.schedule').text(audio.currentTime+'秒');
        });
    });
</script>

 

 

 

video视频的操作，同音频操作基本一样，由于时间原因，今天写不完了，但后面会接着讲。

 

欢迎关注技术开发分享录：http://fenxianglu.cn/