Propiedades de objeto de audio HTML, métodos, eventos y aplicación de reproductor de música

Se divide en dos partes: el frente presenta principalmente que Html5 proporciona métodos, propiedades y eventos para operaciones DOM para objetos de audio;

El reproductor de música se implementa principalmente en la parte inferior del navegador mediante el uso de audio jquery bootstrap.

Efecto:

Tabla de contenido

Objeto de sonido

método común

atributos comunes

eventos comunes

reproductor de música

página html

archivo de estilo

archivo de comandos

Servidor

Resumir

---

Objeto de sonido

método común

método	describir
carga()	Cargue archivos multimedia y prepárelos para reproducirlos. Por lo general, se usa para precargar antes de la reproducción, pero también para recargar archivos multimedia.
jugar()	Reproducir archivos multimedia. Si el audio no está cargado, se carga y se reproduce; si el audio está en pausa, cambia a reproducción.
pausa()	Pausa la reproducción de un archivo multimedia.
canPlayType()	Comprueba si el navegador admite el tipo de medio especificado.

atributos comunes

Atributos	describir
fuente actual	Devuelve la URL del audio actual
tiempo actual	Establecer o devolver la posición de reproducción actual en el audio (segundos)
duración	Devuelve la duración del audio en segundos.
terminado	Devuelve si la reproducción del audio ha terminado
error	Devuelve un MediaError exclusivo que representa el estado de error de audio.
en pausa	Establecer o devolver si el audio está en pausa
apagado	Establecer o devolver si se apaga el sonido
volumen	Establecer o devolver el volumen del audio
auto-reproducción	Valor booleano; declare esta propiedad, el audio se reproducirá automáticamente lo antes posible, sin esperar a que se descargue todo el archivo de audio
control S	Si se declara este atributo, el navegador proporcionará un panel de control que contiene sonido, progreso de reproducción y pausa de reproducción, lo que permite a los usuarios controlar la reproducción de audio.
bucle	Booleano; si se declara, el audio se reproducirá en bucle

eventos comunes

evento	describir
jugar	Se activa cuando se ejecuta el método play()
jugando	Despedido mientras jugaba
pausa	Activado cuando se ejecuta el método pause()
actualización de tiempo	Se activa cuando se cambia la posición de reproducción
terminado	Se activa cuando se detiene la reproducción después de completar la reproducción
espera	Se dispara cuando se espera que se cargue el siguiente cuadro
cambio de tasa	Se activa cuando cambia la velocidad de reproducción actual
cambio de volumen	Activado cuando el volumen cambia
Poder jugar	Se activa cuando se requiere almacenamiento en búfer a la velocidad de reproducción actual
puede jugar	Se activa cuando no se requiere almacenamiento en búfer a la velocidad de reproducción actual
duracióncambiar	Se activa cuando cambia la duración de la reproducción
inicio de carga	Se dispara cuando el navegador comienza a buscar datos en la web
progreso	Activado cuando el navegador está buscando un archivo multimedia
suspender	Se activa cuando el navegador suspende la obtención de archivos multimedia y la obtención de archivos no finaliza normalmente
abortar	Se activa cuando se anula la obtención de datos multimedia, pero la anulación no se debe a un error
error	Se activa cuando se produce un error al obtener un archivo multimedia
vaciado	Activado cuando la red se inicializa
estancado	Se activa cuando el navegador no puede obtener datos multimedia
metadatos cargados	Se activa cuando los metadatos multimedia han terminado de cargarse
datos cargados	Se activa cuando se cargan los datos de reproducción multimedia en la posición actual
buscando	Activado cuando el navegador está solicitando datos
buscado	Se activa cuando el navegador deja de solicitar datos

Los métodos, propiedades y eventos anteriores se manipulan a través de JavaScript.

reproductor de música

El reproductor de música se divide en cuatro partes, servidor, página html, archivo de estilo, archivo de script.

página html

Para usar los íconos en bootstrap, debe crear carpetas css y fonts;

Introduce todos los archivos en bootstrap.min.js/bootstrap.min.js y fuentes, que puedes descargar tú mismo.

El contenido es el siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音乐播放器</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="music_main">
    <div class="music_left">
        <img class="music_img" id="music_img" src="./img/1.jpg" alt="">
    </div>
    <audio id="player">
        <source src="./audio/不分手的恋爱%20–%20汪苏泷.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 元素。
    </audio>
    <div class="play_left">
        <div class="music_title">
            <span class="music_name">不分手的恋爱 – 汪苏泷</span>
            <span class="totalTimeSpan">/03:25</span>
            <span class="playTimeSpan">00:00</span>
        </div>
        <div class="music_rate">
            <div class="music-progress"></div>
        </div>
    </div>
    <div class="play_right">
        <i class="glyphicon glyphicon-step-backward" id="music_prev"></i>
        <i class="glyphicon glyphicon-play" id="music_dian"></i>
        <i class="glyphicon glyphicon-step-forward" id="music_next"></i>
    </div>
    <div class="music_right">
        <ul>
            <li><i class="glyphicon glyphicon-volume-up" id="setVolume"></i></li>
            <li>
                <div class="slider">
                    <input type="range" id="volume" min="0" max="100" value="0">
                </div>
            </li>
        </ul>
    </div>
</div>
<script src="./js/jquery-3.2.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/play.js"></script>
</body>
</html>

archivo de estilo

Entre ellos, la configuración del volumen se realiza mediante el control deslizante, que se toma prestado del artículo en línea.

El contenido es el siguiente:

* {
    margin: 0;
    padding: 0;
}

.music_main {
    position: fixed;
    left: 200px;
    bottom: 0;
    margin-left: 16px;
    margin-right: 16px;
    height: 70px;
    color: #ccc;
    width: 80%;
    box-shadow: 5px -6px 10px #ccc;
}

.music_left {
    float: left;
    height: 70px;
    margin-right: 10px;
}

.music_img {
    width: 70px;
    height: 70px;
}

.play_left {
    float: left;
    width: 450px;
    height: 70px;
}

.play_right {
    float: left;
    width: 400px;
    height: 70px;
    margin-left: 30px;
    color: #000000;
}

.play_left .music_title {
    margin-top: 12px;
    line-height: 28px;
    color: #000000;
}

.play_left .music_title .music_name {
    float: left;
    font-size: 18px;
}

.play_left .music_title .playTimeSpan {
    float: right;
}

.play_left .music_title .totalTimeSpan {
    float: right;
}

.play_left .music_rate {
    float: left;
    width: 98%;
    height: 5px;
    background: #ccc;
    margin-top: 8px;
    margin-left: 8px;
    border-radius: 2px;
}

.play_left .music-progress {
    height: 5px;
    background: #ffb800;
    border-radius: 2px;
    width: 0;
}

.music_right {
    width: 500px;
    height: 70px;
    float: left;
    color: #000000;
}

.music_right ul {
    list-style: none;
}

.music_right ul li {
    float: left;
    margin-left: 32px;
}

#music_prev {
    line-height: 70px;
    font-size: 24px;
    margin-left: 126px;
    margin-right: 21px;
    cursor: pointer;
}

#music_dian {
    line-height: 70px;
    font-size: 24px;
    margin-left: 21px;
    margin-right: 21px;
    cursor: pointer;
}

#music_next {
    line-height: 70px;
    font-size: 24px;
    margin-left: 21px;
    cursor: pointer;
}

#setVolume {
    line-height: 70px;
    font-size: 24px;
    cursor: pointer;
}

.slider {
    position: absolute;
    top: 50%;
    left: 73%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 14px;
    padding: 14px 0 14px 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
}

.slider p {
    font-size: 26px;
    font-weight: 600;
    padding-left: 30px;
}

.slider input[type="range"] {
    -webkit-appearance: none !important;
    width: 200px;
    height: 2px;
    background: #ffdf1f;
    border: none;
    outline: none;
}

.slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 30px;
    height: 30px;
    background: black;
    border: 2px solid black;
    border-radius: 50%;
    cursor: pointer;
}

.slider input[type="range"]::-webkit-slider-thumb:hover {
    background: black;
}

archivo de comandos

Use js para realizar funciones como asignar información de canciones del reproductor, pausar la reproducción, cambiar de canción y configurar el volumen.

Entre ellos, la parte de la asignación, debido a que la solicitud ajax es asíncrona por defecto, habrá problemas con la asignación, por lo que se cambia a una solicitud síncrona.

El contenido es el siguiente:

window.onload = function () {
    // 绑定音频元素
    var $player = document.getElementById('player');

    // 绑定播放按钮
    var $dian = document.getElementById('music_dian');

    // 设置音频初始属性
    var volume_num = 0.5;

    // 当前歌曲索引
    var currentIndex = 0;

    // 设置播放列表
    var music_list = [{
        'id': 1,
        'cover': './img/1.jpg',
        'singer': '汪苏泷',
        'song_name': '不分手的恋爱',
        'song_path': '../audio/不分手的恋爱%20–%20汪苏泷.mp3'
    },];

    // 初始化设置
    setInit();

    // 绑定音频控制开关
    $dian.onclick = function () {
        if (this.classList == 'glyphicon glyphicon-play') {
            this.className = 'glyphicon glyphicon-pause';
            $player.play();
        } else {
            // layui-icon-pause
            this.className = 'glyphicon glyphicon-play';
            $player.pause();
        }
    };

    // 设置播放器初始属性
    function setInit() {
        // 设定音量
        $player.volume = volume_num;
        $('#volume').val(volume_num * 100);

        // 通过同步方式获取播放列表信息
        $.ajaxSettings.async = false;
        $.getJSON('./service.php', {}, function (res) {
            // 赋值播放列表
            music_list = res;
        });

        // 设定歌曲封面
        $('#music_img').attr('src', music_list[0].cover);

        // 设定歌曲名称和歌手
        $('.music_name').text(music_list[0].song_name + ' - ' + music_list[0].singer);

        // 设定歌曲路径
        $player.src = music_list[0].song_path;
    }

    // 监听播放器播放时间改变事件
    $player.addEventListener('timeupdate', function () {
        // 当前播放时间
        var currentTime = $player.currentTime;
        // 总时间
        var totalTime = $player.duration;

        // 当是数字的时候
        if (!isNaN(totalTime)) {
            // 得到播放时间与总时长的比值
            var rate = currentTime / totalTime;
            // 设置时间显示
            // 播放时间
            $('.playTimeSpan').text(musicTime(currentTime));
            // 总时长
            $('.totalTimeSpan').text('/' + musicTime(totalTime));
            // 设置进度条
            $('.music-progress').css('width', rate * 441 + 'px');
        }
    });

    // 设置音量
    $('#volume').change(function () {
        volume_num = $(this).val();
        $player.volume = volume_num * 0.01
    });

    // 上一首
    $('#music_prev').click(function () {
        if (currentIndex > 0) {
            currentIndex -= 1;
        } else {
            // 切换到最后一首
            currentIndex = music_list.length - 1;
        }
        // 设置播放标识为暂停
        $dian.className = 'glyphicon glyphicon-play';
        // 播放时间
        $('.playTimeSpan').text('00:00');
        // 设置歌曲进度归零
        $('.music-progress').css('width', '1px');
        // 设置歌曲
        setMusic();
    });

    // 下一首
    $('#music_next').click(function () {
        if (currentIndex < (music_list.length - 1)) {
            currentIndex += 1;
        } else {
            // 切换为第一首
            currentIndex = 0;
        }
        // 设置播放标识为暂停
        $dian.className = 'glyphicon glyphicon-play';
        // 播放时间
        $('.playTimeSpan').text('00:00');
        // 设置歌曲进度归零
        $('.music-progress').css('width', '1px');
        // 设置歌曲
        setMusic();
    });

    // 设置播放器歌曲信息
    function setMusic() {
        // 设定歌曲封面
        $('#music_img').attr('src', music_list[currentIndex].cover);
        // 设定歌曲名称和歌手
        $('.music_name').text(music_list[currentIndex].song_name +
            ' - ' + music_list[currentIndex].singer);
        // 设定歌曲路径
        $player.src = music_list[currentIndex].song_path;
    }

    // 歌曲时长（00:00）
    function musicTime(sens) {
        // 分
        var m = parseInt(sens / 60);
        // 秒
        var s = parseInt(sens % 60);
        // 补零
        m = m > 9 ? m : "0" + m;
        s = s > 9 ? s : "0" + s;
        return m + ":" + s;
    }
};

Servidor

Use el lenguaje php, que se usa principalmente para devolver datos, porque es solo un reproductor simple, aquí solo devuelve datos en formato json; en proyectos normales, se debe realizar el procesamiento de datos y luego se debe dar formato a la salida.

El contenido es el siguiente:

header('content-type:text/html;charset=utf8 ');

$arr = [
    [
        'id' => 1,
        'cover' => './img/1.jpg',
        'singer' => '汪苏泷',
        'song_name' => '不分手的恋爱',
        'song_path' => './audio/不分手的恋爱%20–%20汪苏泷.mp3'
    ],
    [
        'id' => 2,
        'cover' => './img/2.jpg',
        'singer' => '张镐哲',
        'song_name' => '不是我不小心',
        'song_path' => './audio/不是我不小心%20–%20张镐哲.mp3'

    ],
    [
        'id' => 3,
        'cover' => './img/3.jpg',
        'singer' => '郑源&陶钰玉',
        'song_name' => '不要在我寂寞的时候说爱我',
        'song_path' => './audio/不要在我寂寞的时候说爱我%20–%20郑源&陶钰玉.mp3'
    ],
    [
        'id' => 4,
        'cover' => './img/4.jpg',
        'singer' => '齐秦',
        'song_name' => '不让我的眼泪陪我过夜',
        'song_path' => './audio/不让我的眼泪陪我过夜%20–%20齐秦.mp3'
    ],
];

echo json_encode($arr);

Resumir

Un reproductor de música implementado mediante el desplazamiento fijo en la parte inferior del navegador. Se da cuenta principalmente de mostrar información de la canción, reproducir y pausar la canción, mostrar el progreso correspondiente después de la reproducción de la canción, ajustar el volumen (predeterminado 50%) y cambiar de canción a través del logotipo.

A través de la práctica del reproductor de música, tengo una mejor comprensión de las propiedades y los eventos del audio, y domino cómo aplicarlos. El siguiente paso es prepararme para una aplicación más compleja.

Artículo de referencia

js para obtener la duración de la canción_HTML5 Tutorial: Desarrollo de un reproductor de música simple usando JS