整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          html多頁面實現(xiàn)背景音樂的連續(xù)播放,簡單處理筆記

          在多個HTML頁面之間切換時持續(xù)播放背景音樂,可以使用JavaScript和localStorage來實現(xiàn)。這里有一個簡單的實現(xiàn)方案:

          1. 創(chuàng)建一個隱藏的音頻播放器: 在每個HTML頁面的<body>標(biāo)簽內(nèi)添加一個隱藏的音頻標(biāo)簽,并設(shè)置自動播放和循環(huán)播放屬性。
          1. 使用JavaScript控制音頻狀態(tài): 當(dāng)頁面加載時,檢查localStorage中是否有音樂正在播放的狀態(tài),如果有,則恢復(fù)播放。同時,當(dāng)頁面離開時,記錄音樂的播放狀態(tài)到localStorage。

          下面是一個簡化版的多頁面背景音樂連續(xù)播放的Demo示例。這個例子包含兩個HTML文件:index.html 和 page2.html。請確保你有相應(yīng)的音頻文件(如music.mp3)并放置在與HTML文件相同的目錄下。

          index.html

          <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8" />
                  <title>首頁</title>
                  <style>
                      #backgroundMusic {
                          display: none;
                      }
                  </style>
              </head>
              <body>
                  <h1>首頁</h1>
                  <p>這是首頁,背景音樂會持續(xù)播放。</p>
                  <a href="page2.html">前往第二頁</a>
          
                  <audio controls id="backgroundMusic" loop>
                      <source src="https://img.mtsws.cn/LightPicture/2023/08/45f935a39d0189c0.mp3" type="audio/mpeg" />
                      您的瀏覽器不支持 audio 元素。
                  </audio>
          
                  <script>
                      document.addEventListener('DOMContentLoaded', function () {
                          var audio = document.getElementById('backgroundMusic')
                          setupMusic(audio)
                      })
          
                      function setupMusic(audio) {
                          var musicTime = parseFloat(localStorage.getItem('musicTime')) || 0
                          var isPlaying = localStorage.getItem('musicPlaying') === 'true'
          
                          audio.currentTime = musicTime
                          if (isPlaying) {
                              audio.play().catch(function (error) {
                                  console.error('自動播放被阻止:', error)
                              })
                          }
          
                          audio.onplay = function () {
                              localStorage.setItem('musicPlaying', true)
                          }
                          audio.onpause = function () {
                              localStorage.setItem('musicPlaying', false)
                          }
                          audio.ontimeupdate = function () {
                              localStorage.setItem('musicTime', audio.currentTime)
                          }
                      }
                  </script>
              </body>
          </html>
          

          page2.html

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>第二頁</title>
              <style>
                  #backgroundMusic { display: none; }
              </style>
          </head>
          <body>
          
          <h1>第二頁</h1>
          <p>切換到第二頁,背景音樂仍然連續(xù)播放。</p>
          <a href="index.html">返回首頁</a>
          
          <audio id="backgroundMusic" src="music.mp3" loop></audio>
          
          <script>
              document.addEventListener('DOMContentLoaded', function() {
                  var audio = document.getElementById('backgroundMusic');
                  setupMusic(audio);
              });
          
              // 與index.html中相同的setupMusic函數(shù),確保音樂播放邏輯一致
              function setupMusic(audio) {/*...函數(shù)內(nèi)容與上文相同...*/}
          </script>
          </body>
          </html>

          在這個示例中,index.html 和 page2.html 都包含了相同的JavaScript邏輯來管理背景音樂的播放狀態(tài)和時間。當(dāng)用戶在頁面間導(dǎo)航時,音樂將會無縫繼續(xù)播放,而不是重新開始。請根據(jù)實際需要調(diào)整音頻文件路徑和其他細(xì)節(jié)。

          音頻是網(wǎng)頁承載內(nèi)容很重要的一個元素,也是必不可少的網(wǎng)頁表現(xiàn)形式(圖、文、表、視、音)之一。缺少聲音的網(wǎng)站,就如同人不能說話一樣。曾經(jīng)網(wǎng)頁要想播放音頻,必須得用第三方插件flash。隨著html5標(biāo)準(zhǔn)逐漸普及,如今幾乎所有的瀏覽器都使用html5來播放音頻。

          目標(biāo)

          1. 如何設(shè)置音頻播放?
          2. 支持哪幾種音頻格式?

          音頻播放標(biāo)簽--audio

          作用是在 HTML 頁面中嵌入音頻元素,來播放聲音文件或者音頻流。

          網(wǎng)頁版的音樂播放器

          audio標(biāo)簽的屬性

          src 音頻的播放源(必須)

          controls 瀏覽器自帶的控制條(必須)

          autoplay 自動播放

          loop 循環(huán)播放

          preload 預(yù)加載

          音頻代碼

          每一種瀏覽器自帶的音頻播放控制器都不一樣,但功能都一樣。網(wǎng)上看到的播放器,大多數(shù)都是改過它的樣式。

          瀏覽器自帶的音頻控制條

          支持多個格式--source標(biāo)簽

          <audio> 元素支持三種視頻格式: MP4, WebM, 和 Ogg。

          如果不確定音頻格式是哪個格式,可以使用source標(biāo)簽。<source> 元素可以鏈接不同格式的視頻文件,瀏覽器將使用第一個可識別的格式。

          支持多種格式

          總結(jié)

          audio總結(jié)

          能是出于節(jié)省用戶流量,許多移動端瀏覽器都不支持H5自動播放視頻,必須在用戶主動交互(點擊或者滑動等)后才可以通過js播放視頻

          PC端可以通過設(shè)置muted,自動播放靜音視頻

          安卓瀏覽器均不支持自動播放,實測在微信內(nèi)置瀏覽器,滑動視為交互行為,可以在這之后播放視頻,抖音內(nèi)置瀏覽器則需要點擊交互,鴻蒙系統(tǒng)瀏覽器可以自動播放靜音視頻

          解決方案

          • 法一 引導(dǎo)用戶點擊或滑動

          進(jìn)入網(wǎng)站時彈窗,例如歡迎語等,用戶點擊關(guān)閉后執(zhí)行視頻播放
          簡單粗暴的方法,在某些場景時適用的,實測在安卓、鴻蒙、IOS、抖音瀏覽器等均可以用這個方法解決

          close() {

          const videos = document.querySelectorAll('video');

          for (let i = 0; i < videos.length; i++) {

          const element = videos[i];

          element.play();

          }

          }

          【更多音視頻學(xué)習(xí)資料,點擊下方鏈接免費領(lǐng)取↓↓,先碼住不迷路~】

          點擊領(lǐng)取→音視頻開發(fā)基礎(chǔ)知識和資料包

          法二 jsmpeg

          將視頻轉(zhuǎn)成ts格式,通過jsmpeg解碼器進(jìn)行加載播放,可以實現(xiàn)自動播放,實測基本上可以解決所有移動端無法播放視頻的問題

          轉(zhuǎn)ts

          安裝ffmpeg,輸入命令將mp4轉(zhuǎn)成ts

          • s - 分辨率
          • b - 碼率 b:v代表視頻碼率 b:a代表音頻碼率
          • r - 幀頻

          ffmpeg.exe -i in.mp4 -f mpegts -codec:v mpeg1video -s 680x1080 -b:v 2074k -r 29.97 out.ts

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8" />

          <meta http-equiv="X-UA-Compatible" content="IE=edge" />

          <meta name="viewport" content="width=device-width, initial-scale=1.0" />

          <title>Document</title>

          // 引入jsmpeg

          <script src="./jsmpeg.min.js"></script>

          <style>

          #canvas {

          width: 100%;

          height: 100%;

          }

          </style>

          </head>

          <body>

          <canvas id="canvas" height="750" width="750"></canvas>

          <script>

          var canvas = document.querySelector("#canvas");

          // 加載ts文件

          var player = new JSMpeg.Player("./out.ts", {

          canvas: canvas,

          loop: true, // 循環(huán)播放

          autoplay: true, // 自動播放

          audio: false, // 禁用音頻

          });

          player.play();

          </script>

          </body>

          </html>

          其他問題

          • 移動端自動全屏播放視頻
          <video webkit-playsinline="webkit-playsinline" playsinline></video>

          如果你對音視頻開發(fā)感興趣,覺得文章對您有幫助,別忘了點贊、收藏哦!或者對本文的一些闡述有自己的看法,有任何問題,歡迎在下方評論區(qū)討論!


          主站蜘蛛池模板: 精品人妻一区二区三区浪潮在线| 亚洲熟妇无码一区二区三区导航| 国产成人精品无码一区二区三区| 国产精品一区二区久久沈樵| 男人的天堂av亚洲一区2区| 久久久一区二区三区| 久久亚洲国产精品一区二区| 亚洲一区二区三区偷拍女厕| 国产精品va无码一区二区| 国内精品无码一区二区三区| 日韩电影一区二区三区| 久久国产一区二区三区| 国产高清一区二区三区 | 国产一区二区三区在线免费| 国产福利在线观看一区二区| 天堂不卡一区二区视频在线观看| 一区二区三区免费在线视频| 国产一区二区四区在线观看| 清纯唯美经典一区二区| 在线播放国产一区二区三区 | 中字幕一区二区三区乱码| 久久精品国内一区二区三区| 国产成人一区二区三区精品久久| 一区二区三区视频网站| 日本一区二区不卡视频 | 玩弄放荡人妻一区二区三区| 国产拳头交一区二区| 中文字幕一区二区三区有限公司| 久久精品一区二区三区四区| 麻豆果冻传媒2021精品传媒一区下载| 精品久久久久久无码中文字幕一区| 国产精品综合一区二区三区| 成人国内精品久久久久一区| 男女久久久国产一区二区三区| 欧美亚洲精品一区二区| 精品一区二区三区高清免费观看| 高清国产AV一区二区三区| 亚洲AV成人一区二区三区观看| 无码毛片一区二区三区中文字幕| 亚洲老妈激情一区二区三区| 午夜肉伦伦影院久久精品免费看国产一区二区三区 |