logo图片
phoneGap教程

PhoneGap 调整媒体音量

在 PhoneGap 中使用 JavaScript 调整媒体音量

在上一节中,我们使用 JavaScript 制作了自己的控制按钮。在本节中,我们将学习如何在 PhoneGap 中使用 JavaScript 调整音量。我们将创建一个音量滑块来控制媒体的音量。音量是我们播放器的属性,可以通过用户界面轻松控制。
这些是用于在 PhoneGap 中创建音量滑块的以下步骤:

1) 创建 index2.html 文件

我们将创建另一个 html 文件 index2.html。此文件将包含与 index.html 文件中存在的代码相同的代码。我们将对此文件进行更改,以便我们的 index.html 文件保持不变。
在PhoneGap 中使用JavaScript 调整媒体音量

2) 创建一个输入标签

现在,我们将在用户界面中创建滑块使用 标签并将类型设置为范围。我们还将为其提供一个 ID。我们将设置最大值和最小值,并设置步长和值的值。
<input type="range" id="rngVolume" min="0" max="1" step=".01" value=".5"/>

3) 抓取音量滑块

现在,我们将使用 JQuery 符号。我们还将使用事件滑动停止来调用匿名函数。我们将使用 document.getElementById 获取滑块。我们将使用 console.log() 将音量设置到控制台,并通过以下方式设置播放器音量:
$('#rngVolume').on("slidestop", function(){
                    var volume = document.getElementById('rngVolume').value;
                    console.log(volume);
                    player.volume = volume;
                    
});

在PhoneGap中使用JavaScript调整媒体音量

完成项目

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <title>Media</title>
        <script>
        var player;
            
        window.onload=function()
        {
            player = document.getElementById('myMusic');
            document.getElementById('btnPlay').addEventListener('click', function(){
               player.play(); 
            });
            document.getElementById('btnPause').addEventListener('click' ,function(){
                player.pause();   
            });
            document.getElementById('btnStop').addEventListener('click', function(){
                player.pause();
                player.currentTime = 0;
            });
            $('#rngVolume').on("slidestop", function(){
                    var volume = document.getElementById('rngVolume').value;
                    console.log(volume);
                    player.volume = volume;
                    
                });
            
        }
        
        </script>
    </head>
    <body>
        <audio id="myMusic">
            <source src="media/camera.mp3"/>
        </audio>
        <button id="btnPlay">Play</button>
        <button id="btnPause">Pause</button>
        <button id="btnStop">Stop</button>
        <input type="range" id="rngVolume" min="0" max="1" step=".01" value=".5"/>
        <script type="text/javascript" src="cordova.js" ></script>
    </body>
</html>
昵称: 邮箱:
Copyright © 2020 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4