网赌输赢都是用什么控制

書名：構建移動網站與APP：HTML 5移動開發入門與實戰（跨平臺移動開發叢書）
作者名：常新峰
本章字數： 843字
更新時間： 2020-11-29 00:14:07

3.2 范例——制作音樂播放器APP

本例將使用HTML 5的新元素audio播放音頻。這里給出了一個實現簡單在線音頻播放器的場景，用戶可以點擊播放列表進行音樂切換。

使用Chrome瀏覽器打開網頁文件，運行結果如圖3.3所示。點擊列表中第3首歌曲“LightMusic.mp3”，然后點擊左下角的播放按鈕，運行效果如圖3.4所示。

圖3.3 使用Chrome打開網頁文件

圖3.4 播放“LightMusic.mp3”

利用編輯器打開“3-3．做一個自己的在線音頻播放器．html”文件，代碼如下：

【代碼3-3】

        01    <! DOCTYPE HTML>
        02    <html>
        03    <head>
        04        <style>
        05       // .....．省略部分非關鍵樣式，請參考下載資源源碼
        06        .list{                                          /* 播放列表樣式 */
        07             height:150px;  font-size:15px;
        08             border: 1px solid #464646;
        09            border-radius: 3px;                         /* 圓角 */
        10             -moz-border-radius: 3px;
        11             -webkit-border-radius: 3px;
        12             background-color: #F5F6F9;
        13             margin-bottom:10px;
        14        }
        15       .run{                                            /* 當前正在播放 */
        16             background-color:#4BA9E6 ! important;
        17             background: url(../images/running.gif) no-repeat;
        18             background-position:4px 3px;
        19        }
        20       .box{                                            /* 播放器外觀 */
        21             border: 1px solid #464646;
        22            border-radius: 3px;                         /* 圓角 */
        23             -moz-border-radius: 3px;
        24             -webkit-border-radius: 3px;
        25             padding: 20px;
        26            /* 背景色線性漸變 */
        27             background:-moz-linear-gradient(top, rgb(53, 111, 143), #f6f6f8);
        28             background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(53,
                    111, 143)), to(#f6f6f8));
        29        }
        30        </style>
        31    </head>
        32    <body>
        33       <header><h2>做一個自己的在線音頻播放器</h2></header>
        34        <div class="box">
        35             <div class="list">
        36                <! -- 播放列表 -->
        37                  <ul>
        38                      <li class="run">Kalimba.mp3</li>
        39                      <li>MaidWithTheFlaxenHair.mp3</li>
        40                      <li>LightMusic.mp3</li>
        41                  </ul>
        42             </div>
        43             <div>
        44                <! -- 播放器 -->
        45                <audio src="../res/Kalimba.mp3" controls>非常抱歉，您的瀏覽器不支持
                        audio標簽。</audio>
        46             </div>
        47        </div>
        48    </body>
        49    <script>
        50        var slice = Array.prototype.slice,
        51            audio = document.querySelector('audio'),       // 音頻播放元素
        52            // 將獲取的播放音頻元素列表轉化為數組
        53             items = slice.call(document.querySelectorAll('.list li'),0),
        54             run;
        55        items.forEach(function (item) {
        56            item.addEventListener('click', function () {   // 監聽元素的click事件
        57                run = document.querySelector('li.run');    // 獲取當前播放的元素
        58                run.className = '';              // 取消之前元素播放狀態
        59                item.className = 'run';          // 為當前點擊的音頻加入正在播放樣式
        60                // 替換audio的地址為當前點擊音頻地址
        61                  audio.src = audio.src.replace(run.innerHTML, item.innerHTML);
        62             });
        63        });
        64    </script>
        65    </html>

代碼第45行是播放器的核心，使用HTML 5新元素audio。audio元素有多種屬性供使用，說明如下：

● autoplay：視頻就緒后立即播放。

● controls：顯示瀏覽器默認的播放器控件，如示例中的按鈕。

● loop：某個文件完成播放后重復播放。

● preload：與頁面一同進行加載，并預備播放。autoplay存在時則忽略該屬性。

● src：指定媒體的地址。

代碼第53行獲取播放列表中的文件元素并轉化為數組。代碼第55行循環文件數組，監聽每個元素的click事件。當用戶點擊列表文件時，給文件添加播放的樣式類，并重新設置audio的src屬性。此時，音樂被切換，并且所有播放狀態被重置為初始狀態。

提示

本例中并沒有提及audio元素自身事件的相關使用。audio元素擁有比一般元素更多的事件狀態，如pause、play、progress、waiting等。用戶可以通過這些事件，編寫更為復雜的自定義音頻播放器。

官术网_书友最值得收藏!

構建移動網站與APP：HTML 5移動開發入門與實戰（跨平臺移動開發叢書）

3.2 范例——制作音樂播放器APP