npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sygnas/audio-src

v1.1.1

Published

Check user environment and set HTML5 Audio from HDS / HLS / dash.js

Downloads

9

Readme

syg-audio-src

Check user environment and set HTML5 Audio from HDS / HLS / MSE ユーザー環境をチェックして、HDS / HLS / MSE のソースを HTML5 Audio にセットする。

Description

HTML5 の new Audio() にオーディオソースをセットするだけのモジュールです。 再生コントロールはしません。

MSE形式(MPEG-DASH)を使う場合は dash.js が必要。

Install

npm install --save @sygnas/audio-src

Javascript

共通部分

import AudioSrc from '@sygnas/audio-src';
const audio_src = new AudioSrc();

mp3/ogg 形式で非ストリーミング

audio_src.set_src("hoge.mp3", ardio_src.TYPE_FILE);

HDS形式ストリーミング

http://stm.foo.bar/abcd1234.mp4/manifest.f4m というプレイリストにアクセスしてストリーミングする場合。

if(audio_src.check_support()) {
    audio_src.set_src(
        "stm.foo.bar/abcd1234.mp4",
        ardio_src.TYPE_HDS
    );
}

ストリーミング形式を自動選択

下記3種類が用意されていて、環境に合わせたタイプを自動的に選択する場合。

HDS形式:http://stm.foo.bar/abcd1234.mp4/manifest.f4m HLS形式:http://stm.foo.bar/abcd1234.mp4/playlist.m3u8 MSE形式:http://stm.foo.bar/abcd1234.mp4/manifest.mpd

if(audio_src.check_support()) {
    audio_src.set_src("stm.foo.bar/abcd1234.mp4");
}

オーディオを再生

Audio の再生制御はしないので、他のライブラリなどで個々に実装する必要がある。

audio_arc.audio.load();
audio_arc.audio.play();

Options

new SetAudio({
    hds: {
        protcol: 'http://',
        playlist: '/hoge.f4m',
    }
});

| パラメータ | デフォルト | 備考 | | ---- | ---- | ---- | | hds | {protcol: 'http://', playlist: '/manifest.f4m'} | HDS形式で使用するプロトコルと、プレイリスト | | hls | {protcol: 'http://', playlist: '/playlist.m3u8'} | HLS形式で使用するプロトコルと、プレイリスト | | mse | {protcol: 'http://', playlist: '/manifest.mpd', autoplay: false} | MSE形式で使用するプロトコルと、プレイリスト、自動再生するか |

Property

audio {Audio}

HTML5 Audio。

dash_player {dashjs}

dash.js のインスタンス。

is_support_hds {Boolean}

HDSを再生できるか。

is_support_hls {Boolean}

HLSを再生できるか。

is_support_mse {Boolean}

MedisSourceExtensionに対応しているか。

now_type {String}

ソースとして設定されたタイプ。TYPE_HDS ... TYPE_FILE などが入る。

Methods

check_support()

サポートする環境をチェック。非ストリーミングの場合は関係ない。

戻り値:{Boolean} true: チェック完了 / false: 対象外環境

set_src(url, type = null)

オーディオソースを渡してHTML5 Audioにセットする

| 引数 | 型 | 備考 | | ---- | ---- | --- | | url | String | mp3/ogg など非ストリーミングの場合はファイルのURL | | type | String | ストリーミング、非ストリーミングのタイプを指定する |

url

ストリーミングの場合は http://{この部分}//manifest.f4m をベースURLとして渡す。

type

非ストリーミングの場合は TYPE_FILE を必ず指定。 無指定の場合は環境に合わせたタイプが使用される。

| 引数 | 備考 | | ---- | --- | | {instance}.TYPE_FILE | 非ストリーミング | | {instance}.TYPE_HLS | HLS形式 | | {instance}.TYPE_HDS | HDS形式 | | {instance}.TYPE_MSE | MSE形式 |

if(audio_src.check_support()) {
    audio_src.set_src(
        "stm.foo.bar/abcd1234.mp4",
        ardio_src.TYPE_HDS
    );
}

License

MIT